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

SVG Summit

Avatar for clarklab clarklab
January 21, 2016
Technology
1
170

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
580
Design Workflow with Sketch
Avatar for clarklab clarklab
8
240
User Experience in the real world
Avatar for clarklab clarklab
0
3.3k

Other Decks in Technology

See All in Technology
【CEDEC2025】現場を理解して実現！ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
Avatar for Cygames cygames
PRO
0
490
AI駆動開発 with MixLeap Study【大阪支部 #3】
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
280
ファインディにおける Dataform ブランチ戦略
Avatar for Noriaki Hiraki hiracky16
0
230
AI工学特論: MLOps・継続的評価
Avatar for Asei Sugiyama asei
10
2.1k
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ 〜僕たちが起こすコラボレーション・ムーブメント〜
Avatar for amixedcolor amixedcolor
1
110
恐怖！テストコードなき夜
Avatar for つくぼし tsukuboshi
2
100
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
Avatar for Sansan R&D sansan_randd
0
140
モバイルゲームの開発を支える基盤の歩み ～再現性のある開発ラインを量産する秘訣～
Avatar for QualiArts qualiarts
0
890
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
Avatar for kasacchiful kasacchiful
0
110
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
Avatar for yut yu_kod
1
200
怖くない！GritQLでBiomeプラグインを作ろうよ
Avatar for 晴れ井戸 pal4de
1
140
サイバー攻撃のシミュレーション：攻撃者の視点からみる防御のむずかしさ！AWSで試してみよう / 20250423 Kumiko Hemmi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
190

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.8k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k

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