Using SVG

Basics of using SVG on the web.

tl;dr I don't think SVG is a pleasure to use yet, but we should be ready when it starts to be.

Transcript

1. Using SVG
2. What is SVG?
5. Why SVG?
6. Why SVG? • can be manipulated with CSS and JS • single image, infinite variations • works on @1x, @2x, @100x…
7. Why SVG? • accessible • editable code • unique effects
8. Displaying SVG Basically, IE9+ and Android 3+
9. Displaying SVG <img>
10. Displaying SVG background-image
11. Displaying SVG <svg>
12. Displaying SVG <object>
13. Displaying SVG Data URI
14. Displaying SVG Snap.svg
15. Displaying SVG <defs> + <use>
16. Displaying SVG <symbol> + <use>
17. Icons
18. Icons Raster • @1x and @2x sprite • multiple colors per icon • works everywhere
19. Icons Font • easily edited and generated with IcoMoon • fallback glyphs • can be inserted with CSS (with pseudo-elements) • works everywhere (down to IE6)
20. Icons SVG • one file to rule them all (sprite) • multiple colors per icon • editing SVG properties • fewer positioning issues • less repetitive/cheaper updating
21. Icons SVG • no anti-alias hacks • trimmed dimensions • no CORS header issues • accessible
22. Exporting • don’t expand objects • clean up
23. Exporting Adobe Illustrator • Profile: 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 <tspan> Elements: (selected) • Use <textPath> Element For Text On Path: (selected)
24. Exporting Sketch • pretty bad results • my suggestion 1. copy-paste to Illustrator 2. clean up 3. export
25. –Me “Just because something can be an SVG doesn’t mean it should be.”
26. Namespace • <svg
 xmlns=“http://www.w3.org/2000/svg”
 xmlns:xlink=“http://www.w3.org/1999/xlink”> • prevents conflicts with existing tags from other languages • not needed for inline <svg>s in HTML5
27. viewBox • tl;dr always include a proper viewBox* • it specifies the crop area • remove preserveAspectRatio* * unless you know what you’re doing
28. Styling
29. Styling Features • fills and strokes • transformation • gradients • clipping • filters etc.
30. Styling Precedence • from the most specific • style attribute • <style> tag • presentation attributes
31. Styling Scope • <img>, background-image, <object> — instances cannot be styled • <use> — instance elements hidden behind the Shadow DOM, styling with inheritance • <svg> — full styling capabilities
32. Animation • CSS animations work on SVG, but not for every property • SMIL (Synchronized Multimedia Integration Language) • SMIL works even for <img> and background- image • doesn’t work in IE and Opera Mini
33. Accessibility
34. Workflow • An Overview of SVG Sprite Creation Techniques, Sara Soueidan • grunt-svgstore • grunticon • SVG fragment identifiers and views
35. #protip • turn off git diffs for SVG files • add this to your .gitattributes:
 
 *.svg -diff
36. 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 <g>, <use>, <defs> and <symbol> 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
37. 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
38. Follow Me I’m silvenon everywhere