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

SVG Summit

Avatar for clarklab clarklab
January 21, 2016
Technology
200
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
700
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
Head First モブプログラミング / Head First Mobprogramming
Avatar for TAKAKING22 takaking22
10
12k
20260608_Codexの可能性_ノンプログラマー向け_大城追記
Avatar for NobuakiOshiro doradora09
PRO
0
800
OSPN.JPバージョンアップ作業進捗のご報告 / 20260801-osc26kyoto
Avatar for Akira Ouchi akkiesoft
0
480
モノリス Rails でも日中に rails db:migrate を走らせたい！ / Daytime rails db:migrate on Monolithic Rails!
Avatar for Shintani Teppei euglena1215
4
580
変化の早いClaude Codeを 書籍に落とし込む
Avatar for Oikon oikon48
7
1.4k
ハーレムエンジニアリング
Avatar for yamachan kazuma777777
0
130
【CEDEC2026】コードレビュー支援ツール開発から学ぶ：LLMを用いた業務システムの実践的な運用設計と誤出力対策
Avatar for Cygames, Inc. cygames
PRO
0
670
【CEDEC2026】グラフィックスエンジニアのためのニューラルシェーディング入門
Avatar for Cygames, Inc. cygames
PRO
0
140
老害フォレンジッカーはAI羊の夢を見るか？
Avatar for tadmaddad tadmaddad
0
320
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
250
ラジオの科学
Avatar for Frieve-A frievea
0
300
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
Avatar for henjin0 henjin0
0
170

Featured

See All Featured
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
650
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
220
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
240
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.4k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
990
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k

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