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

SVG Summit

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for clarklab clarklab
January 21, 2016
Technology
190
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
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
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
260
AIドリブン開発の実践知 ― AI-DLC Unicorn Gym実施から見えた可能性と課題
Avatar for MIXI ENGINEERS mixi_engineers
PRO
0
120
40代からのアウトプット ― 経験は価値ある学びに変わる / 20260404 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
5
900
MCPゲートウェイ MCPass の設計と実装 エンタープライズで AI を「運用できる」状態にする
Avatar for k.muguruma mtpooh
1
180
さくらのクラウドでつくるCloudNative Daysのオブザーバビリティ基盤
Avatar for Taisuke Okamoto a.k.a BigBaBy b1gb4by
0
110
【PHPカンファレンス小田原2026】Webアプリケーションエンジニアにも知ってほしい オブザーバビリティ の本質
Avatar for Futoshi Endo fendo181
0
320
Databricks Lakebaseを用いたAIエージェント連携
Avatar for Daiki Akimoto NTTD daiki_akimoto_nttd
0
170
建設的な現実逃避のしかた / How to practice constructive escapism
Avatar for Pauli pauli
4
290
申請待ちゼロへ！AWS × Entra IDで実現した「権限付与」のセルフサービス化
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
1
110
AIを活用したアクセシビリティ改善フロー
Avatar for 出口 裕貴 degudegu2510
1
160
Hooks, Filters & Now Context: Why MCPs Are the “Hooks” of the AI Era
Avatar for Miriam Schwab miriamschwab
0
120
2026-04-02 IBM Bobオンボーディング入門
Avatar for YutaNonaka yutanonaka
0
250

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
710
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
250
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.6k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
170
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
960
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
250
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k

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