Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG Summit

Avatar for clarklab clarklab
January 21, 2016
Technology
1
180

SVG Summit

Slides from my Sketch Workflow talk at SVG Summit

Avatar for clarklab

clarklab

January 21, 2016
Tweet

More Decks by clarklab

See All by clarklab
UX Playbook: Real World User Exercises
Avatar for clarklab clarklab
1
670
Design Workflow with Sketch
Avatar for clarklab clarklab
8
250
User Experience in the real world
Avatar for clarklab clarklab
0
3.3k

Other Decks in Technology

See All in Technology
Hardware/Software Co-design: Motivations and reflections with respect to security
Avatar for Bryan Cantrill bcantrill
1
210
20260114_データ横丁 新年LT大会：2026年の抱負
Avatar for タロウ taromatsui_cccmkhd
0
360
The Engineer with a Three-Year Cycle
Avatar for YAMADA Nobuko e99h2121
0
160
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
3
420
「全社導入」は結果。1人の熱狂が組織に伝播したmikanのn8n活用
Avatar for Sota Mikami sota_mikami
0
210
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
AI Agent Agentic Workflow の可観測性 / Observability of AI Agent Agentic Workflow
Avatar for yuzujoe yuzujoe
5
2.2k
クラウドセキュリティの進化 — AWSの20年を振り返る
Avatar for kei4eva4 kei4eva4
0
150
「違う現場で格闘する二人」——社内コミュニティがつないだトヨタ流アジャイルの実践とその先
Avatar for Shin shinichitakeuchi
0
530
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.7k
アウトプットはいいぞ / output_iizo
Avatar for uhooi uhooi
0
130
#22 CA × atmaCup 3rd 1st Place Solution
Avatar for yumizu yumizu
1
230

Featured

See All Featured
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
890
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
45
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
1
220
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
180
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
44
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
54
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
220
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k

Transcript

  1. Working with
 Sketch

  2. Clark InVision

  3. None

  4. The Zebra Previously UX

  5. None

  6. Why Sketch?

  7. Vector-based 1 Artboards 2 Assets 3

  8. @clarklab #SVGsummit

  9. Working with
 Sketch+SVG

  10. Exporting

  11. Mark It Set Options Export! 1 2 3

  12. Slices Groups+ Layers Artboards

  13. Saving SVGs from a .Sketch Document

  14. Single Batch 1 2

  15. Managing file paths

  16. /icons/house.svg /logos/wishlist.svg 1 2

  17. Managing resolutions

  18. @2x @3x @1x

  19. Viewbox (and other properties)

  20. 40 x 40 slice

  21. 40 x 40 artboard

  22. folder-icon.svg

  23. SVG Structure

  24. None

  25. clock.svg

  26. Yes No

  27. Maintaining an icon set

  28. Stay Organized 1 Better than a folder full of SVG

    2 Mix and match 3

  29. Using Symbols

  30. Stay in Sync 1 Keep exports isolated 2

  31. Logo sets

  32. Background colors

  33. Responsive icons when one-size doesn’t fit all

  34. None
  35. None

  36. Sketch Tool Command Line

  37. None
  38. None
  39. None
  40. None

  41. sketchtool list pages filename.sketch sketchtool dump filename.sketch sketchtool export artboards

    filename.sketch ——output ——scale ——formats

  42. InVision Asset syncing

  43. IconJar Set smashing

  44. None

  45. invisionapp.com/ecourses/ design-workflow-with-sketch

  46. @clarklab #SVGsummit