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
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
Avatar for Serverless Operations slsops
2
220
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
130
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
Avatar for soudai sone soudai
PRO
12
4.9k
変化するコーディングエージェントとの現実的な付き合い方 〜Cursor安定択説と、ツールに依存しない「資産」〜
Avatar for empitsu empitsu
4
1.3k
日本の85%が使う公共SaaSは、どう育ったのか
Avatar for たけだ taketakekaho
1
140
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
13k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
15
400k
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
530
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
Avatar for capytan capytan
6
2.6k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
170

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
240
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k

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