SVG for Designers

Visit https://goo.gl/mJBuon to get original Keynote.

Transcript

1. SVG for Designers Tunghsiao Liu (sparanoid.com) Sketch Meetup Mar 25, 2017
2. Scalable Vector Graphics • Developed by the World Wide Web Consortium (W3C) since 1999 • XML-based 2D graphics • Can be resized without losing quality • Can be animated and interacted
3. Scalable Vector Graphics
4. What is Vector Lines Polygons Points
5. SVG Basic Shapes • Rectangles（矩形） • Circles（圆） • Ellipses（椭圆） • Lines（线） • Polygons（多边形） • Polylines（折线） • Paths（路路径）
6. SVG Basic Shapes (The Hard Way) <rect x="10" y="10" width="30" height="30" stroke="black" stroke- width="5"/> <circle cx="25" cy="75" r="20" stroke="red" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke- width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill=“transparent"/>
7. Using SVG • …as image mask • …as icon system • …as charts • …with responsive styles • …with animations
8. SVG as Image Mask
10. can-top.jpg (260 KB) can-top-alpha.png (11 KB)
11. <svg ...> <defs> <mask id="canTopMask"> <image width="560" height="1388" xlink:href="img/can-top-alpha.png"> </image> </mask> </defs> <image id="canTop" width="560" height="1388" mask="url(#canTopMask)" xlink:href="can-top.jpg"> </image> </svg>
12. 1.2 MB vs 271 KB JPEG + PNG alpha + SVG Mask Peter Hrynkow - Using SVG to shrink your PNGs ORIGINAL POST PNG only
13. SVG Icon System
14. LeanCloud Icon System ORIGINAL PAGE
15. SVG Icons vs Web Fonts …with Ad blockers Web Fonts Google Cloud Platform Documentation ORIGINAL PAGE SVG Icons
16. SVG Charts
17. Highcharts - Demo ORIGINAL PAGE
18. Highstock - Demo ORIGINAL PAGE
19. D3.js - Gallery ORIGINAL PAGE
20. Responsive SVGs
21. Sara Soueidan - Making SVGs Responsive with CSS ORIGINAL POST
22. Ilya Pukhalski - Rethinking Responsive SVG ORIGINAL POST
23. Iconic - Using Iconic Responsively ORIGINAL PAGE
24. Animating SVG
25. Gabriel - Orbit @ CodePen ORIGINAL PEN
26. Polygon - PlayStation 4 Review ORIGINAL POST
27. Sarah Drasner - Pool Ripple @ CodePen ORIGINAL PEN
28. LegoMushroom - MOTION for the web @ CodePen ORIGINAL PEN
29. SVG Tips • Convert text to outlines • Use semantic layer names • Compress files before using on production • Automate repetitive tasks
30. Convert Text to Outlines
33. command - shift - O Sketch - Convert to Outlines REFERENCE
35. Use Semantic Layer Names
38. Compressing SVG
39. svgo Node.js-based tool for optimizing SVG vector graphics files. github.com/svg/svgo REPOSITORY
40. $ svgo input.svg output.svg $ svgo -f ./images/svg/ github.com/svg/svgo REPOSITORY
42. 4.02 KB vs 2.23 KB SVGO Compressed Sketch Output github.com/svg/svgo REPOSITORY
43. Automate Repetitive Tasks
44. svgo-compressor A Plugin that compresses SVG assets using SVGO, right when you export them in Sketch. github.com/BohemianCoding/svgo-compressor REPOSITORY
46. automator-workflows A collection of Automator workflows (services) that speed up your design / development process. github.com/sparanoid/automator-workflows REPOSITORY
48. SVGOMG! SVGO's Missing GUI jakearchibald.github.io/svgomg/ LINK
49. grunt-svgstore Merge SVGs from a folder (to create an SVG sprite) github.com/FWeinb/grunt-svgstore REPOSITORY
50. <svg class="icon icon-arrow-right"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons.svg#arrow-right"> </use> </svg>
51. That’s all folks!
52. speakerdeck.com/sparanoid Online PDF version
53. goo.gl/mJBuon Original Keynote download
54. t.cn/R6fgiqt Original Keynote download