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

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
630
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
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
Avatar for Preferred Networks pfn
PRO
4
920
ラスベガスの歩き方 2025年版（re:Invent 事前勉強会）
Avatar for JunjiKoide junjikoide
0
640
文字列操作の達人になる ~ Kotlinの文字列の便利な世界 ~ - Kotlin fest 2025
Avatar for Tomoki Yamashita tomorrowkey
2
250
.NET 10のBlazorの期待の新機能
Avatar for tkym htkym
0
160
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
Avatar for emi emiki
0
270
AIエージェントによる業務効率化への飽くなき挑戦 -AWS上の実開発事例から学んだ効果、現実そしてギャップ-
Avatar for Kiminori Yokoi nasuvitz
5
1.5k
Observability — Extending Into Incident Response
Avatar for Narimichi Takamura nari_ex
1
600
GCASアップデート（202508-202510）
Avatar for 高橋広和 techniczna
0
130
JAWS UG AI／ML #32 Amazon BedrockモデルのライフサイクルとEOL対応/How Amazon Bedrock Model Lifecycle Works
Avatar for quiver quiver
1
330
SOTA競争から人間を超える画像認識へ
Avatar for Yosuke Shinya shinya7y
0
640
仕様駆動開発を実現する上流工程におけるAIエージェント活用
Avatar for sergicalsix sergicalsix
10
4.8k
RemoteFunctionを使ったコロケーション
Avatar for Matsumoto Kazutaka mkazutaka
1
160

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
It's Worth the Effort
Avatar for 3n 3n
187
28k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.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