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

SVG Summit

clarklab
January 21, 2016
Technology
1
160

SVG Summit

Slides from my Sketch Workflow talk at SVG Summit

clarklab

January 21, 2016
Tweet

More Decks by clarklab

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

Other Decks in Technology

See All in Technology
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
120
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
280
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
320
OSSの実装を参考にBedrockエージェントを作る
moritalous
2
130
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
200
人生を左右する「即答」のススメ: 一瞬の判断を間違えないためにするべきこと
takasyou
7
900
【Snowflake九州ユーザー会#2】BigQueryとSnowflakeを比較してそれぞれの良し悪しを掴む / BigQuery vs Snowflake: Pros & Cons
civitaspo
4
1.5k
どうすると生き残れないのか/how-not-to-survive
hanhan1978
2
1.4k
あなたが人生で成功するための 5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
450
困難を「一般解」で解く
fujiwara3
8
2.5k

Featured

See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Statistics for Hackers
jakevdp
797
220k
Rails Girls Zürich Keynote
gr2m
94
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k

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