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

SVG Summit

Avatar for clarklab clarklab
January 21, 2016
Technology
200
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
690
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
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
2
460
41歳でAWSが好きすぎてITエンジニアになったおっさんの話
Avatar for Yuuki Yamashita yama3133
1
720
変更し続けられるシステムをどう保つか — AI時代のSSoTという設計原則
Avatar for かわうそ kawauso
1
1k
仕様駆動開発、導入半年。「本当に速くなってるの?」にデータで答える / AICon2026_hirakawa
Avatar for Rakus_Dev rakus_dev
0
300
[Droidcon Orlando '26] The Android Lens: Applying Mobile Forensics to AI Performance
Avatar for mvndy_hd amanda_hinchman
1
100
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい！Databricksのai_queryについて調べてみた
Avatar for Kamoshika kamoshika
1
270
探索・可視化・自動化を一本化 Amazon Quickでデータ活用スピードを上げる方法
Avatar for こーへい koheiyoshikawa
0
160
インフラと開発の垣根を超えていき！〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
Avatar for da-hatakeyama hatahata021
3
390
データエンジニアリングとドメイン駆動設計
Avatar for 増田 亨 masuda220
PRO
14
2.3k
第67回コンピュータビジョン勉強会CVPR2026読会前編
Avatar for TSUKAMOTO Kenji tsukamotokenji
0
160
PHPで作って学ぶリアルタイム音声対話AIとWebSocket入門 by ムナカタ
Avatar for ムナカタ munakata
0
110
『モデル + ハーネス』で読み解く AIエージェント入門
Avatar for oracle4engineer oracle4engineer
PRO
2
160

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
280
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
230
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
240
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
220
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
410
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
390
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k

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