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
570
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
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
Avatar for oracle4engineer oracle4engineer
PRO
1
110
Text-to-SQLの評価データセットを作って最新LLMモデルの性能評価をしてみた
Avatar for Gota gotalab555
3
770
"SaaS is Dead" は本当か！？ 生成AI時代の医療 Vertical SaaS のリアル
Avatar for KAKEHASHI kakehashi
PRO
2
150
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
38k
kubellが挑むBPaaSにおける、人とAIエージェントによるサービス開発の最前線と技術展望
Avatar for kubell kubell_hr
0
240
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
Avatar for MADOX madoxten
13
7.2k
脅威をモデリングしてMCPのセキュリティ対策を考えよう
Avatar for GMO Flatt Security flatt_security
4
1.4k
堅牢な認証基盤の実現 TypeScriptで代数的データ型を活用する
Avatar for KAKEHASHI kakehashi
PRO
1
200
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
6.4k
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
12k
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.2k
ハッカー視点で学ぶサイバー攻撃と防御の基本
Avatar for Nomizo Nomizo nomizone
3
1.8k

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.8k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k

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