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

SVG Summit

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for clarklab clarklab
January 21, 2016
Technology
190
1

SVG Summit

Slides from my Sketch Workflow talk at SVG Summit

Avatar for clarklab

clarklab

January 21, 2016

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
260
User Experience in the real world
Avatar for clarklab clarklab
0
3.3k

Other Decks in Technology

See All in Technology
AIのために、AIを使った、Effect-TSからの脱却 〜テストを活用した安全なリファクタリングの進め方〜
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
180
マンション備え付けのネットワークとLTE回線を組み合わせた ネットワークの安定化の考案
Avatar for harutiro harutiro
1
140
実例から学ぶ GuardDuty（SSH BruteForce）調査の全体フローと勘所【SecurityJAWS】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
0
170
Directions Asia 2026 | Beyond Buildable AI Agents: Let’s Visualize Partner Value in the AI Era
Avatar for Dynamics Ryo ryoheig0405
0
130
障害対応のRunbookは作った、でも本当に動くの？ AWS FIS で EKS の AZ 障害を再現してみた
Avatar for Hiroki Takatsuka tk3fftk
0
120
AIコーディングエージェントの活用で、コードは静かに肥大化した
Avatar for 篠田 陽介 yosukeshinoda
1
130
PdM・Eng・QAで進めるAI駆動開発の現在地/aidd-with-pdm-eng-qa
Avatar for butatamasoba / Shota Kusaba / 草場翔太 shota_kusaba
0
260
いつの間にかデータエンジニア以外の業務も増えていたけど、意外と経験が役に立ってる
Avatar for ZOZO Developers zozotech
PRO
0
740
キャリア25年目にしてTypeScript に出会うまで - 「型」を通じて振り返るプログラミング言語遍歴 / Meeting TypeScript After 25 Years in Tech - Looking Back at My Programming Language Journey Through "Types"
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
2
120
Fラン学生が考える、AI時代のデザインに執着した突破口
Avatar for husensan husengs7
1
230
RedmineをAIで効率的に使う検証
Avatar for Takayuki Yoshioka yoshiokacb
0
160
AI Agent に“攻略本”を渡したら、150フォームの移行が回り始めた話/登壇資料（高橋 悟生）
Avatar for Hacobu hacobu
PRO
1
240

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
570
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Visualization
Avatar for Eitan Lees eitanlees
151
17k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.7k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
150
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
360

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