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

SVG Summit

Avatar for clarklab clarklab
January 21, 2016
Technology
1
180

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
600
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
自動テストのコストと向き合ってみた
Avatar for SmartHR 品質保証部 qa
0
200
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
2
920
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
Avatar for おーしろ noayaoshiro
0
230
AIツールでどこまでデザインを忠実に実装できるのか
Avatar for Oikon oikon48
5
2.6k
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
Avatar for oracle4engineer oracle4engineer
PRO
2
140
about #74462 go/token#FileSet
Avatar for tom twinkle tomtwinkle
1
500
これがLambdaレス時代のChatOpsだ！実例で学ぶAmazon Q Developerカスタムアクション活用法
Avatar for iwamot iwamot
PRO
4
160
ガバメントクラウド（AWS）へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
150
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
9.1k
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
Avatar for naro143 naro143
1
140
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
Avatar for nobu09 nobu09
1
380
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
Avatar for Ichiro Nishiuma nishiuma
2
150

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k

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