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

SVG is for Everybody

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. 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
  2. Even if you need to go deeper, it’s not that

    bad. We’ll get into that in a bit.
  3. SVG syntax can be learned! Unlike any other image format.

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

    .pdf / .ai / .whatever open in Illustrator, Save As .svg
  5. 94K

  6. <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>
  7. .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
  8. 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/
  9. 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.
  10. .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.
  11. 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
  12. <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>
  13. <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>
  14. <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>
  15. <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>
  16. <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>
  17. 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>
  18. <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>
  19. 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.)
  20. <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>
  21. <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.
  22. 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:
  23. All this stuff is possible on inline SVG. You get

    some advantages of SVG with <img> or background-image, but not as many.
  24. 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?)
  25. 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%
  26. 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
  27. Raster images are a grid of pixels so it’s easy

    to understand they have an intrinsic width and height.
  28. 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).
  29. <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.
  30. .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
  31. <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>
  32. <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); }
  33. SVG Filters You can use CSS filters on SVG, but

    SVG has its own special filters too.
  34. 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
  35. <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>