Using SVG - Speaker Deck

Slide 1

Slide 1 text

Using SVG

Slide 2

Slide 2 text

What is SVG?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Why SVG?

Slide 6

Slide 6 text

Why SVG? • can be manipulated with CSS and JS • single image, inﬁnite variations • works on @1x, @2x, @100x…

Slide 7

Slide 7 text

Why SVG? • accessible • editable code • unique eﬀects

Slide 8

Slide 8 text

Displaying SVG Basically, IE9+ and Android 3+

Slide 9

Slide 9 text

Displaying SVG

Slide 10

Slide 10 text

Displaying SVG background-image

Slide 11

Slide 11 text

Displaying SVG

Slide 12

Slide 12 text

Displaying SVG

Slide 13

Slide 13 text

Displaying SVG Data URI

Slide 14

Slide 14 text

Displaying SVG Snap.svg

Slide 15

Slide 15 text

Displaying SVG +

Slide 16

Slide 16 text

Displaying SVG +

Slide 17

Slide 17 text

Icons

Slide 18

Slide 18 text

Icons Raster • @1x and @2x sprite • multiple colors per icon • works everywhere

Slide 19

Slide 19 text

Icons Font • easily edited and generated with IcoMoon • fallback glyphs • can be inserted with CSS (with pseudo-elements) • works everywhere (down to IE6)

Slide 20

Slide 20 text

Icons SVG • one ﬁle to rule them all (sprite) • multiple colors per icon • editing SVG properties • fewer positioning issues • less repetitive/cheaper updating

Slide 21

Slide 21 text

Icons SVG • no anti-alias hacks • trimmed dimensions • no CORS header issues • accessible

Slide 22

Slide 22 text

Exporting • don’t expand objects • clean up

Slide 23

Slide 23 text

Exporting Adobe Illustrator • Proﬁle: SVG 1.1 • Fonts: • Type: SVG • Subsetting: None (Use System Fonts) / Only Glyphs Used • Image Location: Link • CSS Properties: Style Elements • Decimal Places: 1 • Output Fewer Elements: (selected) • Use Element For Text On Path: (selected)

Slide 24

Slide 24 text

Exporting Sketch • pretty bad results • my suggestion 1. copy-paste to Illustrator 2. clean up 3. export

Slide 25

Slide 25 text

–Me “Just because something can be an SVG doesn’t mean it should be.”

Slide 26

Slide 26 text

Namespace • • prevents conﬂicts with existing tags from other languages • not needed for inline s in HTML5

Slide 27

Slide 27 text

viewBox • tl;dr always include a proper viewBox* • it speciﬁes the crop area • remove preserveAspectRatio* * unless you know what you’re doing

Slide 28

Slide 28 text

Styling

Slide 29

Slide 29 text

Styling Features • ﬁlls and strokes • transformation • gradients • clipping • ﬁlters etc.

Slide 30

Slide 30 text

Styling Precedence • from the most speciﬁc • style attribute • tag • presentation attributes

Slide 31

Slide 31 text

Styling Scope • , background-image, — instances cannot be styled • — instance elements hidden behind the Shadow DOM, styling with inheritance • — full styling capabilities

Slide 32

Slide 32 text

Animation • CSS animations work on SVG, but not for every property • SMIL (Synchronized Multimedia Integration Language) • SMIL works even for and background- image • doesn’t work in IE and Opera Mini

Slide 33

Slide 33 text

Accessibility

Slide 34

Slide 34 text

Workﬂow • An Overview of SVG Sprite Creation Techniques, Sara Soueidan • grunt-svgstore • grunticon • SVG fragment identiﬁers and views

Slide 35

Slide 35 text

#protip • turn off git diffs for SVG files • add this to your .gitattributes:    *.svg -diff

Slide 36

Slide 36 text

Sources • Using SVG, Chris Coyier • Exporting SVG for the web with Adobe Illustrator CC, Michaël Chaize • SVG `symbol` a Good Choice for Icons, Chris Coyier • Structuring, Grouping, and Referencing in SVG — The , , and Elements, Sara Soueidan • An Overview of SVG Sprite Creation Techniques, Sara Soueidan • Tips for Creating Accessible SVG, Léonie Watson • A Guide to SVG Animations (SMIL), Sara Soueidan

Slide 37

Slide 37 text

Sources • 5 Gotchas You’re Gonna Face Getting Inline SVG Into Production, Rob Levin • Namespaces Crash Course, Mozilla Developer Network • Understanding SVG Coordinate Systems and Transformations, Sara Soueidan • Part 1 — The viewport, viewBox, and preserveAspectRatio • Part 2 —The transform Attribute • Part 3 — Establishing New Viewports

Slide 38

Slide 38 text

Follow Me I’m silvenon everywhere