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
580
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
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
Avatar for yut yu_kod
1
240
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
Avatar for 弁護士ドットコム bengo4com
0
1.8k
Lazy application authentication with Tailscale
Avatar for Elliot Blackburn bluehatbrit
0
190
CDKTFについてざっくり理解する！！～CloudFormationからCDKTFへ変換するツールも作ってみた～
Avatar for モブエンジニア masakiokuda
1
110
AI専用のリンターを作る #yumemi_patch
Avatar for 弁護士ドットコム bengo4com
5
4.2k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
27k
Claude Code に プロジェクト管理やらせたみた
Avatar for 佐藤圭吾 unson
6
3.3k
OPENLOGI Company Profile
Avatar for OPENLOGI hr01
0
67k
Should Our Project Join the CNCF? (Japanese Recap)
Avatar for whywaita whywaita
PRO
0
330
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for ape1422 airtravelguide
0
340
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
180
2025 AWS Jr. Championが振り返るAWS Summit
Avatar for Kazuki Adachi kazukiadachi
0
110

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Docker and Python
Avatar for Tania Allard trallard
44
3.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
510
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
49
5.5k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
690

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