SVG for Designers - Speaker Deck

Slide 1

Slide 1 text

SVG for Designers Tunghsiao Liu (sparanoid.com) Sketch Meetup Mar 25, 2017

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Scalable Vector Graphics

Slide 4

Slide 4 text

What is Vector Lines Polygons Points

Slide 5

Slide 5 text

SVG Basic Shapes • Rectangles（矩形） • Circles（圆） • Ellipses（椭圆） • Lines（线） • Polygons（多边形） • Polylines（折线） • Paths（路路径）

Slide 6

Slide 6 text

SVG Basic Shapes (The Hard Way)

Slide 7

Slide 7 text

Using SVG • …as image mask • …as icon system • …as charts • …with responsive styles • …with animations

Slide 8

Slide 8 text

SVG as Image Mask

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

can-top.jpg (260 KB) can-top-alpha.png (11 KB)

Slide 11

Slide 11 text

Slide 12

Slide 12 text

1.2 MB vs 271 KB JPEG + PNG alpha + SVG Mask Peter Hrynkow - Using SVG to shrink your PNGs ORIGINAL POST PNG only

Slide 13

Slide 13 text

SVG Icon System

Slide 14

Slide 14 text

LeanCloud Icon System ORIGINAL PAGE

Slide 15

Slide 15 text

SVG Icons vs Web Fonts …with Ad blockers Web Fonts Google Cloud Platform Documentation ORIGINAL PAGE SVG Icons

Slide 16

Slide 16 text

SVG Charts

Slide 17

Slide 17 text

Highcharts - Demo ORIGINAL PAGE

Slide 18

Slide 18 text

Highstock - Demo ORIGINAL PAGE

Slide 19

Slide 19 text

D3.js - Gallery ORIGINAL PAGE

Slide 20

Slide 20 text

Responsive SVGs

Slide 21

Slide 21 text

Sara Soueidan - Making SVGs Responsive with CSS ORIGINAL POST

Slide 22

Slide 22 text

Ilya Pukhalski - Rethinking Responsive SVG ORIGINAL POST

Slide 23

Slide 23 text

Iconic - Using Iconic Responsively ORIGINAL PAGE

Slide 24

Slide 24 text

Animating SVG

Slide 25

Slide 25 text

Gabriel - Orbit @ CodePen ORIGINAL PEN

Slide 26

Slide 26 text

Polygon - PlayStation 4 Review ORIGINAL POST

Slide 27

Slide 27 text

Sarah Drasner - Pool Ripple @ CodePen ORIGINAL PEN

Slide 28

Slide 28 text

LegoMushroom - MOTION for the web @ CodePen ORIGINAL PEN

Slide 29

Slide 29 text

SVG Tips • Convert text to outlines • Use semantic layer names • Compress ﬁles before using on production • Automate repetitive tasks

Slide 30

Slide 30 text

Convert Text to Outlines

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

command - shift - O Sketch - Convert to Outlines REFERENCE

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Use Semantic Layer Names

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Compressing SVG

Slide 39

Slide 39 text

svgo Node.js-based tool for optimizing SVG vector graphics ﬁles. github.com/svg/svgo REPOSITORY

Slide 40

Slide 40 text

$ svgo input.svg output.svg $ svgo -f ./images/svg/ github.com/svg/svgo REPOSITORY

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

4.02 KB vs 2.23 KB SVGO Compressed Sketch Output github.com/svg/svgo REPOSITORY

Slide 43

Slide 43 text

Automate Repetitive Tasks

Slide 44

Slide 44 text

svgo-compressor A Plugin that compresses SVG assets using SVGO, right when you export them in Sketch. github.com/BohemianCoding/svgo-compressor REPOSITORY

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

automator-workflows A collection of Automator workflows (services) that speed up your design / development process. github.com/sparanoid/automator-workflows REPOSITORY

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

SVGOMG! SVGO's Missing GUI jakearchibald.github.io/svgomg/ LINK

Slide 49

Slide 49 text

grunt-svgstore Merge SVGs from a folder (to create an SVG sprite) github.com/FWeinb/grunt-svgstore REPOSITORY