$30 off During Our Annual Pro Sale. View Details »

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
660
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
最近の生成 AI の活用事例紹介
Avatar for Asei Sugiyama asei
1
100
AWS re:Invent 2025~初参加の成果と学び~
Avatar for Kubo kubomasataka
0
180
ExpoのインダストリーブースでみたAWSが見せる製造業の未来
Avatar for 濱田孝治 hamadakoji
0
190
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
9.9k
事業の財務責任に向き合うリクルートデータプラットフォームのFinOps
Avatar for Recruit recruitengineers
PRO
2
180
100以上の新規コネクタ提供を可能にしたアーキテクチャ
Avatar for yu-kioo ooyukioo
0
240
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
Avatar for yayoi_dd yayoi_dd
0
640
Kiro を用いたペアプロのススメ
Avatar for Taiki Sugawara taikis
4
1.6k
普段使ってるClaude Skillsの紹介(by Notebooklm)
Avatar for Higuchi kokoro zerebom
8
2k
2025年 開発生産「可能」性向上報告 サイロ解消からチームが能動性を獲得するまで/ 20251216 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
220
[Neurogica] 採用ポジション/ Recruitment Position
Avatar for Neurogica neurogica
1
110
Knowledge Work の AI Backend
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
180

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
90
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
0
1.8M
Side Projects
Avatar for Sacha Greif sachag
455
43k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
1
12
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
29
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
0
22

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