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
270
User Experience in the real world
Avatar for clarklab clarklab
0
3.3k

Other Decks in Technology

See All in Technology
AI時代のPRレビューにどう向き合うか？
Avatar for KairiM kairim0
1
250
JAWSUG TOHOKU 青森支部 「LoGoチャット」のAWS移行で 乗り越えたこと
Avatar for たけだ taketakekaho
0
350
パスキーの自動テストはどこまでいけるのか
Avatar for teamLab teamlab
PRO
0
290
Webの常識が通じないHTMLメールのダークモード
Avatar for teamLab teamlab
PRO
0
140
DGX Spark でどこまでハッキングができるのか？
Avatar for kash1064 kash1064
3
1.4k
今さら理解するウェブフォントver.2026
Avatar for takanorip takanorip
3
920
PHPカンファレンス関西の招待状 / Invitation to PHP Conference Kansai
Avatar for Y-KANOH ykanoh
0
220
Temporal 最高!でも改めて「日付」について調べたら人類の負債すぎる件
Avatar for Riya Amemiya riyaamemiya
0
210
Benchmarking Disaggregated Serving on vLLM + Dynamo with a Real Coding-Agent Workload
Avatar for NTT docomo Business nttcom
1
200
⾮構造化データを価値に変える AI エージェント基盤とその組織
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
210
AIカンパニーへの転換を支えた、エンジニアの仕事の再定義
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
1.3k
Post AI時代のリファクタリング実践記 / Refactoring in the post AI era
Avatar for 株式会社カミナシ kaminashi
1
300

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
600
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
58k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
380
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
12k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
5.3k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
400
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
16k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.7k

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