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

SVG is for Everybody

8081b26e05bb4354f7d65ffc34cbbd67?s=47 Chris Coyier
November 17, 2014

SVG is for Everybody

Slides from the last time I did this talk live, at An Event Apart San Francisco '14.


Chris Coyier

November 17, 2014

More Decks by Chris Coyier

Other Decks in Design


  1. None

  3. None
  4. None
  5. None
  6. mycockpit.club

  7. 2014

  8. None
  9. <svg> <svg>

  10. None
  11. None

  13. 13.9K

  14. 13.9K 13.9K 13.9K 13.9K

  15. Sharp at any size or resolution Small in file size

    SVG is
  16. Styleable & Responsive - you can apply CSS Scriptable -

    shapes can be in the DOM Systematic - easy to build an icon system Animateable - in many comfortable ways Interactive - links! hovers! games! Accessible - in all the right ways SVG is
  17. Big Promises / Can’t Use

  18. Nope. You can use SVG now and it’s pretty dang

  19. Well-supported

  20. Even if you need to go deeper, it’s not that

    bad. We’ll get into that in a bit.
  21. HEY that looks like HTML (It’s XML)

  22. None
  23. SVG syntax can be learned! Unlike any other image format.

    (You don’t “learn” JPG, unless you’re like Rain Man.)
  24. SVG can be made from essentially anything “vector”. .eps /

    .pdf / .ai / .whatever open in Illustrator, Save As .svg
  25. “Scaleable Vector Graphics” SVG can be made from essentially anything

  26. SVG will never replace raster graphics.

  27. Rasterfarian GET IT?! (This image would be very bad at

    being vector.)
  28. wpapcommunity.com/site/index.php/gallery/musisi-jazz/bob-marley-rastaman-2048 (This image would be very good at being vector.)

  29. Todd Parker’s Chart https://docs.google.com/presentation/d/1CNQLbqC0krocy_fZrM5fZ-YmQ2JgEADRh3qR6RbOOGk/edit#slide=id.p

  30. 94K

  31. 1.3MB 129K

  32. How do you get SVG to use?

  33. 1 Learn the SVG syntax and hand-craft them.

  34. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100"

    height="100" /> <circle cx="30" cy="30" r="30" fill="green" /> <polygon points="60,20 100,40 100,80 60,100 20,80 20,40" /> <path stroke="sienna" stroke-width="2" fill="none" d="M 80,180 Q 50,120 80, 60 Q 90, 40 80, 20 Q 100, 20 120, 20 Q 110, 40 120, 60 Q 150,120 120, 180 Z" /> <!-- there are a few more --> </svg>
  35. Basic Shapes <line> <rect> <circle> <ellipse> <path> <polyline> <polygon>

  36. 2 Make your own images in a vector editing program

  37. None
  38. (p.s. you can copy and paste SVG out of Illustrator

  39. Illustrator $19.99 / month Extremely robust Lots of training/tutorials available

  40. Sketch $99 Modern take on design software Great for web

    Great exporting
  41. None
  42. WebCode $39.99

  43. iDraw $24.99

  44. Inkscape Free

  45. None
  46. 3 Go snag some vector stuff off the internet.

  47. None
  48. None
  49. None
  50. • Adjust colors • Change artboard size • Remove cruft

    • Save it
  51. None
  52. http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

  53. None

  55. <img src="clover.svg" alt="clover"> SVG-as-img HTML

  56. SVG-as-img HTML <img src="clover.canvas" alt="clover">

  57. None
  58. .clover { background: url(clover.svg); } Great way to support gradients

    in IE 9. Compass can automatically do that for you. www.sitepoint.com/getting-started-svg-gradients/ SVG as background-image CSS
  59. html5hub.com/#i.5cx78814yheb6u

  60. None
  61. None
  62. AddType image/svg+xml .svg .svgz .htaccess css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/ content-type fix

  63. Because SVG can be resized worry-free, you probably will resize

    them most of the time. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  64. img { max-width: 100%; height: auto; } CSS img[src$=".svg"] {

    max-width: auto; width: 100%; height: auto; } Don’t get bigger than the container element. Also, don’t scale up. Don’t get bigger than the container element. Scale up if you need to.
  65. .horse { background: url(horse.svg); background-size: cover; } CSS Firefox used

    to have an issue with blurring SVG when resizing, but not anymore since v24. Fill the entire background of this element no matter what. Scale up if you have to.
  66. You can put <svg> right up in your <html>, homegirl.

    Inline SVG
  67. None
  68. Three Big Advantages to Using Inline SVG: 1) Shapes are

    in the DOM: CSS Styling! JavaScript stuff! 2) No additional HTTP Request (it’s like a data URI, but better) 3) You can use define once and use in multiple places
  69. SVG Templating Using inline <svg> as an icon system

  70. Sites need a system for icons.

  71. <svg> </svg>

  72. <svg> <path d="M80.893,40.234c- … <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 …

  73. <svg> <g id="shape-icon-1"> <path d="M80.893,40.234c- … <g> <g id="shape-icon-2"> <path

    d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <g> </svg>
  74. <svg> <defs> <g id="shape-icon-1"> <path d="M80.893,40.234c- … <g> <g id="shape-icon-2">

    <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <g> </defs> </svg>
  75. <body> <svg> <defs> <g id="shape-icon-1"> <path d="M80.893,40.234c- … <g> <g

    id="shape-icon-2"> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <g> </defs> </svg>
  76. <body> <svg width="0" height="0"> <defs> <g id="shape-icon-1"> <path d="M80.893,40.234c- …

    <g> <g id="shape-icon-2"> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <g> </defs> </svg>
  77. <body> <?php include "svg-defs.php"; ?>

  78. <svg viewBox="0 0 100 25" class="shape-tab"> <use xlink:href="#shape-icon-1"></use> </svg>

  79. <nav class="main-nav" id="main-nav"> <a href="/" class="home"> <svg viewBox="0 0 100

    25" class="shape-tab"> <use xlink:href="#shape-tab"></use> </svg> <span>Blog</span> </a> <a href="/video-screencasts/" class="videos"> <svg viewBox="0 0 100 25" class="shape-tab"> <use xlink:href="#shape-tab"></use> </svg> <span>Videos</span> </a>
  80. None
  81. None
  82. 2014.cssconf.com codepen.io/elrumordelaluz/pen/dhwLi

  83. Even better, let’s get that block of SVG <defs> out

    of the HTML entirely.
  84. defs.svg <svg> <defs> <g id="shape-icon-1"> <path d="M80.893,40.234c- … <g> <g

    id="shape-icon-2"> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <g> </defs> </svg>
  85. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <g id="shape-icon-1"> <path d="M80.893,40.234c- … <g> <g

    id="shape-icon-2"> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <g> </defs> </svg>
  86. <svg viewBox="0 0 100 25" class="shape-tab"> <use xlink:href="defs.svg#shape-icon-1"></use> </svg> browser

  87. IE (any version) won’t allow <use> with an external source.

    Jonathan Neal has a fixer-upper script. (XHRs in the guts so it’s like straight up inline SVG.)
  88. Using <symbol> instead of <g> is even better!

  89. <svg style="display: none;"> <defs> <g id="icon"> <path d="M6-0.076-0.02 … <path

    d="M16-0.36-1.09 … <g> </defs> </svg> <svg viewBox="0 0 100 100" class="icon"> <desc>Icon of a clamdigger.</desc> <use xlink:href="#icon" /> </svg>
  90. <svg xmlns="http://www.w3.org/2000/svg"> <defs> <symbol id="icon" viewBox="0 0 100 100"> <desc>Icon

    of a clamdigger.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol> </defs> </svg> <svg class="icon"> <use xlink:href="#icon" /> </svg> Or, do add viewBox if you want/need width: auto; behavior.
  91. .specific-icon { background: url('svg.svg#svgView(viewBox(0,0,48,41))'); } <svg> <view id='monkey-view' viewPort='…' />

    </svg> <img src='faces.svg#monkey-view' alt=''> Fragment Identifiers
  92. This is the idea of SVG Sprites

  93. None
  94. 1) Vector (awesome) 2) No background-position craziness 3) More CSS

    control (i.e. SVG-specific, @media, etc) 4) All the other advantages of inline SVG (accessible, multiple links, scriptable) 5) Fallbacks are possible It’s the same idea, only way better because:
  95. None
  96. codepen.io/chriscoyier/pen/mhaFy

  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. Media Queries in CSS + SVG

  105. All this stuff is possible on inline SVG. You get

    some advantages of SVG with <img> or background-image, but not as many.
  106. SVG vs. Icon Fonts Cagematch!


  108. Icon Font SVG Vector yup (but anti-aliasing…) yup CSS Control

    some (single color) better Positioning die XXX murder good Weird Failures* yup less Semantics none <span> / ::before better <svg> Accessibility be very careful better, <title><desc> Ease of use meh better Browser Support IE 6+ IE 9+ Weird Failures: CORS/Fx + more?, CDN/network fail, Chrome non-active tab, no @font-face support (Opera Mini, Nokia XPress, Blackberry 4&5, Android 2.1, Windows Phone 7, 7.8, 8?, more?)
  109. Guess which one I like? Tip: it’s the one that

    isn’t icon fonts.
  110. If you’re going to use icon fonts, read this. It

    goes into how it can be done perfectly* in regards to accessibility, browser support, and failures. *95%
  111. None
  112. Build Tools Don’t freak out.

  113. None
  114. None
  115. None
  116. None
  117. Optimizing SVG 1. Removing meta junk 2. Simplifying shapes 3.

    Reducing crazy precision 4. Removing hidden elements 5. Removing whitespace youtube.com/watch?v=iVzW3XuOm7E&feature=youtu.be youtube.com/watch?v=1AdX8odLC8M&feature=youtu.be Kyle Foster has great videos detailing SVG optimization
  118. None
  119. Raster images are a grid of pixels so it’s easy

    to understand they have an intrinsic width and height.
  120. None
  121. None
  122. SVG has a Viewport and viewBox Viewport is the size

    of the element. Think how the browser window is the viewport for the whole site but an iframe has it’s own smaller viewport. Likewise, SVG has it’s own viewport. viewBox is an attribute on <svg>. It is the “canvas” on which SVG instructions are carried out. It is essentially a nexus with an aspect ratio (don’t think of them as pixels).
  123. None
  124. <svg class="buddy" viewBox="0 0 300 200"> .buddy { width: 400px;

    height: 200px; }
  125. <svg class="buddy" viewBox="0 0 300 200"> .buddy { width: 200px;

    height: 200px; }
  126. <svg class="buddy" viewBox="0 0 300 200” preserveAspectRatio="xMinYMax"> .buddy { width:

    200px; height: 200px; }
  127. Dealing with Fallbacks e.g. dealing with IE 8 and Android

  128. Remember, one kind of fallback is nothing. Like if you’re

    using an icon to enhance a word.
  129. None
  130. <img src="images/horse.svg" alt="horse"> <script src="/js/libs/svgeezy.js"></script> <script> svgeezy.init(false, "png"); </script> </body>

  131. None
  132. <img src="images/horse.png" alt="horse"> <script src="/js/libs/svgeezy.js"></script> <script> svgeezy.init(false, 'png'); </script> </body>

  133. codepen.io/chriscoyier/pen/jnsIr

  134. codepen.io/chriscoyier/pen/jnsIr

  135. It works, but it requests two images in non-supporting browsers.

  136. <picture> <source type="image/svg+xml" srcset="graph.svg"> <img src="graph.png" alt="A lovely graph."> </picture>

    … but, SVG is more well supported than the responsive images stuff is.
  137. None
  138. <picture> <source srcset="graph.svg" type="image/svg+xml"> <img srcset="graph-small.png, graph-medium.png 400, graph-large.png 800"

    alt="A lovely graph."> </picture>
  139. .my-element { background-image: url(fallback.png); background-image: linear-gradient(transparent, transparent), url(image.svg); } Fallback

    for CSS background-image This works because it combines multiple backgrounds and old-syntax gradients, thus it works for Android 2.x where multiple backgrounds alone did not. You could use Modernizr too, but if you just need it for this, it would be overkill. pauginer.tumblr.com/post/36614680636/invisible-gradient-technique
  140. Also, background is generally decorative and non-vital to content, so

    no fallback is often acceptable.
  141. Supporting (most) browsers Just leaves alone IE 9-11 Ajax’s in

    <g> IE 6-8 <img src="icon.png">
  142. Animating SVG Let us count the ways.

  143. 1. SVG Syntax <animate> (“SMIL”) 2. With CSS @keyframes /

    transitions 3. With JavaScript
  144. None
  145. <button id="button"> <svg viewBox="0 0 194.6 185.1"> <polygon fill="#FFD41D" points="97.3,0

    127.4,60.9 …”> <animate id="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="110,58.2 147.3,0 192.1,29 …”/> </polygon> </svg> <span id="button-text">Save</span> </button>
  146. None
  147. None
  148. None
  149. None
  150. None
  151. SVG Filters & Blend Modes The OG of cool web

  152. <svg width="0" height="0"> <filter id="blur"> <feGaussianBlur stdDeviation="5" /> </filter> </svg>

    <div class="an-event-apart"></div> .an-event-apart { -webkit-filter: url(#blur); filter: url(#blur); }
  153. None
  154. SVG Filters You can use CSS filters on SVG, but

    SVG has its own special filters too.
  155. Accessible SVG Thankfully it ain’t that hard.

  156. None
  157. 1. Use SVG 2. Use Inline SVG 3. Provide a

    <title> and aria-labeledby 4. Provide a <desc> and aria-labeledby 5. Use <text> 6. Make links focusable (if parts) 7. Use ARIA roles 8. Create alternatives
  158. <svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc

    id="desc"> A light green rectangle with rounded corners and a dark green border. </desc> <a xlink:href="http://example.com" tabindex="0" role="link"> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> <text x="35" y="30" font-size="1em" text-anchor="middle" fill=“#000000"> Website </text> </a> </svg>
  159. http://css-tricks.com/svg-text-typographic-designs/

  160. None
  161. @chriscoyier