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
670
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
Multi-Agent並列開発を 安全に回すための技術 / Technology for Safely Multi-Agent Parallel Development
Avatar for philomagi tooppoo
0
220
ご挨拶「10周年を迎える共創ラボのこれまでとこれから」
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
2
230
製造現場での生成AIの活用、およびエージェントAIの実装のあり方、AVEVAの取り組み
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
180
5分でわかるDuckDB Quack
Avatar for chanyou0311 chanyou0311
4
270
Why is RC4 still being used?
Avatar for tamaiyutaro tamaiyutaro
0
130
WebGIS AI Agentの紹介
Avatar for _shimizu _shimizu
0
590
AIは、人間らしい仕事の夢を見るか？─ AI時代のtoB/toEプロダクトを再設計する
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
160
Agile and AI Redmine Japan 2026
Avatar for Kenji Hiranabe hiranabe
4
500
AI-DLCを “そのまま導入しなかった”話 ~組織に合わせてアジャストした 私たちの実践共有~
Avatar for hiroramos hiroramos4
PRO
1
440
組織における AI-DLC 実践
Avatar for ASKUL Engineer askul
0
170
Amazon Redshift zero-ETL 統合を活用した軽量なマルチプロダクトデータ可視化基盤 / Lightweight Multi-Product Data Visualization with Amazon Redshift Zero-ETL
Avatar for 株式会社カミナシ kaminashi
0
110

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
350
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
240
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
850
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
140
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
220
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.9k

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