$30 off During Our Annual Pro Sale. View Details »

The Wonderful World of SVG

Chris Coyier
October 20, 2015

The Wonderful World of SVG

A talk about front end development + SVG.

Chris Coyier

October 20, 2015
Tweet

More Decks by Chris Coyier

Other Decks in Design

Transcript

  1. Basic Shapes <line> <rect> <circle> <ellipse> <path> <polyline> <polygon> There

    are only a handful of Technically not a basic shape. Basic Shapes are shortcuts to paths.
  2. Let’s spend like 15 seconds looking at SVG syntax. Even

    though most of us will hardly ever touch it directly because there are great tools for it.
  3. <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" style="stop-color:

    #88FF3F" /> <stop offset="0.56" style="stop-color: #6BD819" /> <stop offset="1" style="stop-color: #58BF00" /> </linearGradient> “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/
  4. <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" style="stop-color:

    #88FF3F" /> <stop offset="0.56" style="stop-color: #6BD819" /> <stop offset="1" style="stop-color: #58BF00" /> </linearGradient> “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/ <ellipse fill="url(#gradient)" cx="150" cy="50" rx="150" ry="50" />
  5. <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" style="stop-color:

    #88FF3F" /> <stop offset="0.56" style="stop-color: #6BD819" /> <stop offset="1" style="stop-color: #58BF00" /> </linearGradient> “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/ <ellipse fill="url(#gradient)" cx="150" cy="50" rx="150" ry="50" />
  6. <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" style="stop-color:

    #88FF3F" /> <stop offset="0.56" style="stop-color: #6BD819" /> <stop offset="1" style="stop-color: #58BF00" /> </linearGradient> <path fill="url(#gradient)" d="M129.9,68.6c0,18.8-42.2,9.4-42.2,…" /> “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/ <ellipse fill="url(#gradient)" cx="150" cy="50" rx="150" ry="50" />
  7. <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" style="stop-color:

    #88FF3F" /> <stop offset="0.56" style="stop-color: #6BD819" /> <stop offset="1" style="stop-color: #58BF00" /> </linearGradient> <path fill="url(#gradient)" d="M129.9,68.6c0,18.8-42.2,9.4-42.2,…" /> “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/ <ellipse fill="url(#gradient)" cx="150" cy="50" rx="150" ry="50" />
  8. But why would you even Use SVG? 1 Resolution independent

    2 Design possibilities 3 Use as a system
  9. Why send pixel data when you can send geometry? Math

    is more efficient! Let your powerful computer* do the drawing. *The connection between this idea and client-side MVC is interesting. shoptalkshow.com/episodes/147-tom-dale/
  10. That one would be a little impractical on the web.

    Because it’s like 30 MB. One of the advantages of SVG is that for simple graphics, the file size is smaller and the quality is higher (best of both worlds). But there is a complexity limit.
  11. “Super Nintendo Controller SNES” by Amar Chauhan :: codepen.io/beedesigned/pen/WbZzQx/ <div

    id="icon"> <div id="controller"> <div id="leftPad"> <div id="arrowBG"> <div id="arrow"></div> </div> </div> <div id="bodyPad"></div> <div id="rightPad"> <div id="buttonBG"> <div id="button1"> <div class="circle"></div> <div class="circle"></div> </div> <div id="button2"> <div class="circle"></div> <div class="circle"></div> </div> </div> </div> </div> </div>
  12. If you can get your hands on the vector art…

    you can easily get that into SVG for use on the web.
  13. There are three* useful ways to USE SVG ON THE

    WEB 1 SVG as <img> in HTML 2 SVG as background-image in CSS 3 Inline SVG in HTML * There are more ways, like <object>, <embed>, and <iframe> - but I don’t think they are very useful so let’s ignore them.
  14. INLINE <rect x="10" y="10" width="500" height="500" fill="yellow" stroke="blue" stroke-width="5" />

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inline SVG Demo</title> </head> <body> <svg viewBox="0 0 1000 1000"> </svg> </body> </html>
  15. SVG is pretty efficient already, but it can also be

    heavily optimized in multiple ways. cool fact
  16. SVG gzips very well, because it has a lot of

    repetitive strings. Be sure to enable that on your server for .svg and when testing to decide to use or not, test different formats against the gzipped sizes.
  17. SVG gzips very well, because it has a lot of

    repetitive strings. Be sure to enable that on your server for .svg and when testing to decide to use or not, test different formats against the gzipped sizes. AddType image/svg+xml .svg .svgz <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/html image/svg+xml </ifmodule> HTaccess
  18. PNG

  19. PNG 16 K SVG 319 K CRAZY EXPERIMENT 24 K

    CRAZY EXPERIMENT, GZIPPED
  20. PNG 16 K SVG 319 K CRAZY EXPERIMENT 24 K

    CRAZY EXPERIMENT, GZIPPED ? K SHOULDA BEEN AN SVG AM I RIGHT?
  21. SVGO is great for optimizing .svg files. This demo is

    SVGO-GUI :: github.com/svg/svgo-gui The core library / command-line tools is here :: github.com/svg/svgo A visual in-browser version by Jake Archibald is here :: jakearchibald.github.io/svgomg/
  22. SVGO is great for optimizing .svg files. This demo is

    SVGO-GUI :: github.com/svg/svgo-gui The core library / command-line tools is here :: github.com/svg/svgo A visual in-browser version by Jake Archibald is here :: jakearchibald.github.io/svgomg/
  23. SVG makes for an excellent ICON SYSTEM Icons are incredibly

    common on the web. Tons of sites make use of them because they are useful visual indicators. The style of them change over time, but the concept isn’t a trend.
  24. The classic problem: Say a site needs 20 icons. You

    really don’t want to make 20 separate HTTP requests for those. That would be slow. One of the top ways to make sites faster is to make less requests. An icon system does two things: 1. All icons are in one request. 2. It makes icons easy to use.
  25. Quick Aside It’s looking like HTTP/2 will make concatenating assets

    an anti-pattern. Because. Uh. Reasons. I think there is no penalty for requesting multiple assets from the same host and no extra cookie overhead. So if you leave all the icons separate, you can change a single icon without breaking the cache on all of them.
  26. <svg> <defs> <symbol viewBox="0 0 100 100" id="icon-1"> <title>Follow us

    on Twitter</title> <path d="M80.893,40.234c- … </symbol> </defs> </svg>
  27. <body> <svg> <defs> <symbol viewBox="0 0 100 100" id="icon-1"> <title>Follow

    us on Twitter</title> <path d="M80.893,40.234c- … </symbol> </defs> </svg>
  28. <body> <svg display="none"> <defs> <symbol viewBox="0 0 100 100" id="icon-1">

    <title>Follow us on Twitter</title> <path d="M80.893,40.234c- … </symbol> </defs> </svg>
  29. Leveling up up our icon system 1. Let’s make a

    build tool do the hard part 2. Let’s ajax for the SVG defs, so we can browser cache 3. Let’s add a fallback for non-supporting browsers
  30. <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-logo" viewBox="0 0 100 100" aria-labelledby="title desc">

    <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol> <symbol id="icon-hammer" viewBox="0 0 100 100" aria-labelledby="title desc"> <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol> <symbol id="icon-goat" viewBox="0 0 100 100" aria-labelledby="title desc"> <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol>
  31. defs.svg <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-logo" viewBox="0 0 100 100" aria-labelledby="title

    desc"> <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol> <symbol id="icon-hammer" viewBox="0 0 100 100" aria-labelledby="title desc"> <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol> <symbol id="icon-goat" viewBox="0 0 100 100" aria-labelledby="title desc"> <title>CodePen Logo</title> <desc>Three dimensional box surrounded by a circle.</desc> <path d="M6-0.076-0.02 … <path d="M16-0.36-1.09 … <symbol>
  32. Let’s make a computer build the sprite for us. We

    could do it ourselves, but that’s more work and error-prone.
  33. First, test to see if inline SVG is supported. var

    supportsSvg = function() { var div = document.createElement('div'); div.innerHTML = '<svg/>'; return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg'; };
  34. if (supportsSvg()) { // Ajax for the defs.svg } else

    { // We’re going to need a fallback }
  35. var ajax = new XMLHttpRequest(); ajax.open("GET", "defs.svg", true); ajax.responseType =

    "document"; ajax.onload = function(e) { document.body.insertBefore( ajax.responseXML.documentElement, document.body.childNodes[0] ); } ajax.send(); Ajax means we can browser cache the response.
  36. For the fallback, one option is to use Grunticon. Grunticon

    is a whole system onto itself, so you can definitely just use it exactly as is. But Grunticon doesn’t start with inline SVG in the HTML like we are doing here. We can still use it and do things our own way. Details! css-tricks.com/inline-svg-grunticon-fallback/
  37. if (supportsSvg()) { // Ajax stuff here. } else {

    grunticon([ "", "/fallbacks/icons.data.png.css", "/fallbacks/icons.fallback.css" ]); } Don’t load anything in a “supported” scenario
  38. Should the day come that you don’t need a fallback

    anymore, just stop running Grunticon and doing the support test.
  39. 1. Vector!
 Typically sharper than icon fonts because of non-text

    anti-aliasing. css-tricks.com/icon-fonts-vs-svg/
  40. 1. Vector!
 Typically sharper than icon fonts because of non-text

    anti-aliasing. 2. Easy mulE-color!
 More CSS control than any other method. css-tricks.com/icon-fonts-vs-svg/
  41. 1. Vector!
 Typically sharper than icon fonts because of non-text

    anti-aliasing. 2. Easy mulE-color!
 More CSS control than any other method. 3. Animate!
 Easy to apply transitions and animations. css-tricks.com/icon-fonts-vs-svg/
  42. 1. Vector!
 Typically sharper than icon fonts because of non-text

    anti-aliasing. 2. Easy mulE-color!
 More CSS control than any other method. 3. Animate!
 Easy to apply transitions and animations. 4. Script away!
 Everything is in the DOM. css-tricks.com/icon-fonts-vs-svg/
  43. 1. Vector!
 Typically sharper than icon fonts because of non-text

    anti-aliasing. 2. Easy mulE-color!
 More CSS control than any other method. 3. Animate!
 Easy to apply transitions and animations. 4. Script away!
 Everything is in the DOM. 5. BeKer accessibility! Plus fallbacks!
 Fool-proof, once you set it up well. css-tricks.com/icon-fonts-vs-svg/
  44. 1. Vector!
 Typically sharper than icon fonts because of non-text

    anti-aliasing. 2. Easy mulE-color!
 More CSS control than any other method. 3. Animate!
 Easy to apply transitions and animations. 4. Script away!
 Everything is in the DOM. 5. BeKer accessibility! Plus fallbacks!
 Fool-proof, once you set it up well. 6. BeKer semanEcs!
 <svg> = “image” / <span> = “nothing” css-tricks.com/icon-fonts-vs-svg/
  45. 1. Vector!
 Typically sharper than icon fonts because of non-text

    anti-aliasing. 2. Easy mulE-color!
 More CSS control than any other method. 3. Animate!
 Easy to apply transitions and animations. 4. Script away!
 Everything is in the DOM. 5. BeKer accessibility! Plus fallbacks!
 Fool-proof, once you set it up well. 6. BeKer semanEcs!
 <svg> = “image” / <span> = “nothing” 7. Ease of use
 Easy to manage individual icons, instant build processes. css-tricks.com/icon-fonts-vs-svg/
  46. 1. Vector!
 Typically sharper than icon fonts because of non-text

    anti-aliasing. 2. Easy mulE-color!
 More CSS control than any other method. 3. Animate!
 Easy to apply transitions and animations. 4. Script away!
 Everything is in the DOM. 5. BeKer accessibility! Plus fallbacks!
 Fool-proof, once you set it up well. 6. BeKer semanEcs!
 <svg> = “image” / <span> = “nothing” 7. Ease of use
 Easy to manage individual icons, instant build processes. css-tricks.com/icon-fonts-vs-svg/
  47. Speaking of icons, The Noun Project is the best site

    ever for finding simple vectors for about anything.
  48. SVG is pretty great at ANIMATION 1 Animate with CSS

    2 Animate with SMIL 3 Animate with JavaScript
  49. Animating SVG with CSS is just like animating HTML with

    CSS. If it’s inline SVG, the CSS can be anywhere, like with the rest of the CSS for your page. If you use the SVG any other way, you have to embed the CSS within the SVG. CSS
  50. var circle = document.getElementById("orange-circle"), positionX = 0; setInterval(function() { positionX

    += 10; circle.setAttribute("cx", positionX); if (positionX > 500) { positionX = 0; } }, 20); This is just a dumb ol’ loop that changes an attribute. But that’s animation!
  51. Typically, it means use a library. All of these work

    with SVG, but all have slightly different capabilities, approaches, and focuses. 1. Greensock (GSAP)
 greensock.com - does some cool normalization stuff too 2. Snap.svg
 snapsvg.io - jQuery for SVG - kinda like newer Raphaël 3. Velocity.js
 julian.com/research/velocity 4. SVG.js
 svgjs.com 5. D3
 d3js.org - data powerhouse
  52. You can do CLIPPING & MASKING Clipping paths are always

    vector. Inside the vector shape is shown, outside the vector path is hidden. Masks are images. They can be vector too, but they don’t have to be.
  53. SVG is pretty great at CHARTING Lines? Shapes? Math? Heck

    yeah. SVG doesn’t have charting-specific features. It has features that lend themselves well to charting.
  54. More, more, MORE All this has been the tip of

    the iceberg. There is a TON to know about SVG that we didn’t cover. I mostly wanted to just get you more excited about it. Huge list of information about SVG: css-tricks.com/mega-list-svg-information/