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
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
Avatar for vaaaaanquish vaaaaanquish
34
16k
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
Avatar for yuu26 yuu26
9
2.6k
オブザーバビリティ文化を組織に浸透させるには / install observability culture
Avatar for mackerelio mackerelio
0
160
ユーザー課題を愛し抜く――AI時代のPdM価値
Avatar for KAKEHASHI kakehashi
PRO
1
130
AIが住民向けコンシェルジュに？ Amazon Connectと生成AIで実現する自治体AIエージェント！
Avatar for yuyeah yuyeah
0
180
Kiro と Q Dev で 同じゲームを作らせてみた
Avatar for r3_yamauchi r3_yamauchi
PRO
1
120
「Roblox」の開発環境とその効率化 ～DAU9700万人超の巨大プラットフォームの開発 事始め～
Avatar for Keita Tanji keitatanji
0
140
2025新卒研修・Webアプリケーションセキュリティ #弁護士ドットコム
Avatar for 弁護士ドットコム bengo4com
2
8.2k
Engineering Failure-Resilient Systems
Avatar for Mark Irozuru infraplumber0
0
130
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか？ / SRE Lounge #18
Avatar for Hajime KOSHIRO kossykinto
0
240
datadog-distribution-of-opentelemetry-collector-intro
Avatar for tetsuya28 tetsuya28
0
100
はじめての転職講座/The Guide of First Career Change
Avatar for Hiromu Shioya kwappa
5
4.4k

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.8k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
338
57k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k

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