Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Other Decks in Technology

See All in Technology
Agent × Maestro で始める モバイル E2E　端末準備からテスト実行・結果確認まで
Avatar for SansanTech sansantech
PRO
0
240
Autonomous AI Lakehouse - Live AI Hubから始めるセキュアなAIデータ活用 -
Avatar for oracle4engineer oracle4engineer
PRO
2
180
GitHub、使う？使わない？
Avatar for コロッケそば happysamurai294
0
120
re:Inventで、人生は変わったのか？ / growth-builders-hub-1-reinvent-2026
Avatar for 株式会社みずほ銀⾏ 情報数理⼯学研究所 デジタル技術開発部 mhrtech
2
170
[FECONF-2026] 신대륙을 향한 카카오페이증권 프론트엔드 항해기 (이주승)
Avatar for l1ghthouse l1ghthouse
0
330
How we choose session proposals
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
190
AIエージェントに​ 権限と鍵をどこまで渡すか
Avatar for NRI Netcom nrinetcom
PRO
2
160
You Have Agency（サンキュー、Ruby）
Avatar for Koji SHIMADA snoozer05
PRO
4
620
Claude Codeから見る、エンジニアの世界の変容とその先
Avatar for Oikon oikon48
7
4.9k
自律的なチームを作るためにTechPMがやらないこと
Avatar for Naoki Yoshitake ny7760
0
300
reInvent2026stby LT00 "Change your life!"
Avatar for Shinichiro Kawano shinichirokawano
1
490
生き様としてのSRE
Avatar for Yutaro Sugai hokkai7go
0
140

Featured

See All Featured
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1.1k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.9k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
570
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
540
Design in an AI World
Avatar for tapps tapps
1
380
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.7k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
371
20k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
370
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
520

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