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

SVG Summit

Avatar for clarklab clarklab
January 21, 2016
Technology
210
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
720
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
Does an AI Watermark Survive Translation?
Avatar for Es C machinetranslation
0
510
会計事務所と顧問先の契約関係をOIDC・OAuthで表現する
Avatar for てらら terara
0
560
VPCでもFloatingIPを使いたいんだ
Avatar for Yasunobu Kotani (はくひめ) y_kotani
1
140
The Django UUID Story - DjangoCon US 2026
Avatar for Paolo Melchiorre pauloxnet
0
350
Bet AI Day 2026丨Agentは、「金融」という巨大産業の何を変えられるのか
Avatar for LayerX layerx
PRO
0
100
書籍『生成AIの安全性入門』の入門
Avatar for Koki Wataoka wataoka
0
150
AI駆動開発を組織で促すために
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
7
9k
Point Cloud as a Foreign Language for Multi-modal Large Language Model
Avatar for Takuya MINAGAWA takmin
0
340
internal/testlog で遊ぼう
Avatar for rokuosan rokuosan
0
460
「面白い！」を信じ抜け。激動の時代を貫く、オンリーワン・エンジニアの条件
Avatar for t.kizawa kizawa2020
2
550
tamachi.goを支える技術
Avatar for ryoji miyamoto rymiyamoto
0
120
OAuth SPIFFE Client Authentication（OAuth/OIDC Numa (Immersion) Workshop 2026）
Avatar for OpenID Foundation Japan oidfj
PRO
0
410

Featured

See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
310
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.9k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
850
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
400
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k

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