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

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. The Wonderful World of
    SVG

    View Slide

  2. Chris Coyier
    @chriscoyier

    View Slide


  3. View Slide











  4. View Slide

  5. Basic Shapes




    There are only a handful of

    View Slide

  6. Basic Shapes




    There are only a handful of
    Technically not a basic shape.
    Basic Shapes are shortcuts to paths.

    View Slide

  7. 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.

    View Slide

  8. fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  9. fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  10. fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  11. fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  12. fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  13. fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  14. fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  15. fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  16. “Beaker” by Ben Joyce :: codepen.io/benjoyce/full/myqxad/

    View Slide

  17. “Beaker” by Ben Joyce :: codepen.io/benjoyce/full/myqxad/





    View Slide

  18. x1="0" y1="0" x2="0" y2="100%">




    “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/

    View Slide

  19. x1="0" y1="0" x2="0" y2="100%">




    “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/
    cx="150" cy="50" rx="150" ry="50" />

    View Slide

  20. x1="0" y1="0" x2="0" y2="100%">




    “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/
    cx="150" cy="50" rx="150" ry="50" />

    View Slide

  21. x1="0" y1="0" x2="0" y2="100%">




    d="M129.9,68.6c0,18.8-42.2,9.4-42.2,…" />
    “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/
    cx="150" cy="50" rx="150" ry="50" />

    View Slide

  22. x1="0" y1="0" x2="0" y2="100%">




    d="M129.9,68.6c0,18.8-42.2,9.4-42.2,…" />
    “Gradient Reuse in SVG” by Me :: codepen.io/chriscoyier/pen/ByOWYO/
    cx="150" cy="50" rx="150" ry="50" />

    View Slide

  23. “Nature’s Journey” demo file that comes with Adobe Illustrator

    View Slide

  24. “Nature’s Journey” demo file that comes with Adobe Illustrator
    LET THERE
    BE ART

    View Slide

  25. But why would you even
    Use SVG?
    1 Resolution independent
    2 Design possibilities
    3 Use as a system

    View Slide

  26. SCREEN SIZE & RESOLUTIONS
    Cliché conference presentation graphic depicting different

    View Slide

  27. 1999
    SVG was born in

    View Slide

  28. View Slide

  29. View Slide

  30. 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/

    View Slide

  31. 1999
    SVG was conceived in

    View Slide

  32. 2015
    SVG was conceived in

    View Slide

  33. “Nature’s Journey” demo file that comes with Adobe Illustrator

    View Slide

  34. 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.

    View Slide

  35. View Slide

  36. DEFINITELY!

    View Slide

  37. View Slide

  38. PRROBBBBLY.
    (test the zipped file size)

    View Slide

  39. View Slide

  40. NOPE!

    View Slide

  41. View Slide

  42. Mayyyyybe.
    test context, gzipped size, display size, etc.

    View Slide

  43. “SVG Animation” by Jose Aguinaga :: codepen.io/jjperezaguinaga/full/yuBdq/

    View Slide

  44. “Super Nintendo Controller SNES” by Amar Chauhan :: codepen.io/beedesigned/pen/WbZzQx/






















    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. Pretty useful for

    and/or

    View Slide


  64. type="image/svg+xml"
    srcset="Logo.svg"
    >
    srcset="
    [email protected],
    [email protected] 2x"
    alt="Logo description"
    >

    View Slide

  65. inkscape.org

    View Slide

  66. If you can get your hands
    on the vector art…
    you can easily get that into SVG for use on the web.

    View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. There are three* useful ways to
    USE SVG ON THE WEB
    1 SVG as in HTML
    2 SVG as background-image in CSS
    3 Inline SVG in HTML
    * There are more ways, like , , and - but I don’t think they are very useful so let’s ignore them.

    View Slide


  71. HTML

    View Slide

  72. is content.

    View Slide

  73. .main-header {
    background-image: url(texture.svg);
    }
    CSS

    View Slide

  74. View Slide

  75. INLINE
    fill="yellow" stroke="blue" stroke-width="5" />

    View Slide

  76. INLINE
    fill="yellow" stroke="blue" stroke-width="5" />




    Inline SVG Demo






    View Slide

  77. View Slide

  78. View Slide

  79. SVG-as-

    View Slide

  80. SVG-as-
    SVG as background-image

    View Slide

  81. SVG-as-
    SVG as background-image
    Inline SVG

    View Slide

  82. SVG is pretty efficient already,
    but it can also be heavily optimized
    in multiple ways.
    cool fact

    View Slide

  83. 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.

    View Slide

  84. 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

    AddOutputFilterByType DEFLATE text/html image/svg+xml

    HTaccess

    View Slide

  85. “gzip + poetry = awesome" :: jvns.ca/blog/2013/10/24/day-16-gzip-plus-poetry-equals-awesome/

    View Slide

  86. “gzip + poetry = awesome" :: jvns.ca/blog/2013/10/24/day-16-gzip-plus-poetry-equals-awesome/

    View Slide

  87. View Slide

  88. PNG logo

    View Slide

  89. View Slide

  90. View Slide

  91. View Slide

  92. PNG

    View Slide

  93. PNG
    16 K

    View Slide

  94. PNG
    16 K
    SVG

    View Slide

  95. PNG
    16 K
    SVG
    319 K CRAZY EXPERIMENT

    View Slide

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

    View Slide

  97. PNG
    16 K
    SVG
    319 K CRAZY EXPERIMENT
    24 K CRAZY EXPERIMENT, GZIPPED
    ? K SHOULDA BEEN AN SVG AM I RIGHT?

    View Slide

  98. 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/

    View Slide

  99. 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/

    View Slide

  100. 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.

    View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. View Slide

  105. View Slide

  106. 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.

    View Slide

  107. Past solution to this same problem: CSS Sprites

    View Slide

  108. Past solution to this same problem: Icon Fonts

    View Slide

  109. 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.

    View Slide

  110. Let’s do this thing.
    How to make an icon system from inline SVG

    View Slide



  111. View Slide


  112. View Slide



  113. View Slide




  114. View Slide




  115. View Slide




  116. Follow us on Twitter

    View Slide





  117. Follow us on Twitter

    View Slide





  118. Follow us on Twitter

    View Slide




  119. To use…
    Put this anywhere in the HTML.

    View Slide

  120. View Slide

  121. View Slide

  122. “Step 7: styling an icon group” by Benedikte Vanderweeën :: codepen.io/Benedikte/pen/rAjad

    View Slide

  123. “Step 7: styling an icon group” by Benedikte Vanderweeën :: codepen.io/Benedikte/pen/rAjad

    View Slide

  124. View Slide


  125. View Slide

  126. 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

    View Slide


  127. aria-labelledby="title desc">
    CodePen Logo
    Three dimensional box
    surrounded by a circle.

    aria-labelledby="title desc">
    CodePen Logo
    Three dimensional box
    surrounded by a circle.

    aria-labelledby="title desc">
    CodePen Logo
    Three dimensional box
    surrounded by a circle.

    View Slide

  128. defs.svg

    aria-labelledby="title desc">
    CodePen Logo
    Three dimensional box
    surrounded by a circle.

    aria-labelledby="title desc">
    CodePen Logo
    Three dimensional box
    surrounded by a circle.

    aria-labelledby="title desc">
    CodePen Logo
    Three dimensional box
    surrounded by a circle.

    View Slide

  129. Let’s make a computer
    build the sprite for us.
    We could do it ourselves, but that’s more
    work and error-prone.

    View Slide

  130. IcoMoon is
    very awesome.

    View Slide

  131. IcoMoon
    gave us this
    Using the icons
    is as easy
    as this.

    View Slide

  132. View Slide

  133. Command line build
    systems are even more
    awesome.

    View Slide

  134. How about a little
    graceful degradation
    and browser caching?

    View Slide

  135. First, test to see if
    inline SVG is supported.
    var supportsSvg = function() {
    var div = document.createElement('div');
    div.innerHTML = '';
    return (div.firstChild &&
    div.firstChild.namespaceURI) ==
    'http://www.w3.org/2000/svg';
    };

    View Slide

  136. if (supportsSvg()) {
    // Ajax for the defs.svg
    } else {
    // We’re going to need a fallback
    }

    View Slide

  137. 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.

    View Slide

  138. 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/

    View Slide




  139. Class name that Grun.con
    automa.cally creates from the file
    name.

    View Slide

  140. if (supportsSvg()) {
    // Ajax stuff here.
    } else {
    grunticon([
    "",
    "/fallbacks/icons.data.png.css",
    "/fallbacks/icons.fallback.css"
    ]);
    }
    Don’t load anything
    in a “supported” scenario

    View Slide

  141. View Slide

  142. View Slide

  143. Should the day come that you don’t need
    a fallback anymore, just stop running
    Grunticon and doing the support test.

    View Slide

  144. OK, SHEESH.
    Why do it this way? What are the advantages?

    View Slide

  145. 1. Vector!

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

    View Slide

  146. 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/

    View Slide

  147. 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/

    View Slide

  148. 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/

    View Slide

  149. 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/

    View Slide

  150. 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!

    = “image” / = “nothing”
    css-tricks.com/icon-fonts-vs-svg/

    View Slide

  151. 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!

    = “image” / = “nothing”
    7. Ease of use

    Easy to manage individual icons, instant build processes.
    css-tricks.com/icon-fonts-vs-svg/

    View Slide

  152. 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!

    = “image” / = “nothing”
    7. Ease of use

    Easy to manage individual icons, instant build processes.
    css-tricks.com/icon-fonts-vs-svg/

    View Slide

  153. View Slide

  154. View Slide

  155. View Slide

  156. Speaking of icons, The Noun Project
    is the best site ever for finding simple
    vectors for about anything.

    View Slide

  157. View Slide

  158. View Slide

  159. SVG is pretty great at
    ANIMATION
    1 Animate with CSS
    2 Animate with SMIL
    3 Animate with JavaScript

    View Slide

  160. 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

    View Slide

  161. View Slide

  162. View Slide

  163. Animating SVG with JavaScript
    can mean many different things.
    JavaScript can do anything!
    JS

    View Slide

  164. 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!

    View Slide

  165. 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

    View Slide

  166. “High Five SVG Animation” by MailChimp UX :: codepen.io/mailchimpux/pen/Gblcs

    View Slide

  167. “Yes/No SVG Tick Animation” by Chris Gannon :: codepen.io/chrisgannon/pen/ogEjRa/

    View Slide

  168. codepen.io/sdras/pen/dPqRmP

    View Slide

  169. View Slide

  170. View Slide

  171. View Slide

  172. View Slide

  173. View Slide

  174. View Slide

  175. 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.

    View Slide

  176. “SVG Mask (Experiment)” by Noel Delgado :: codepen.io/noeldelgado/pen/ByxQjL

    View Slide

  177. View Slide

  178. It’s overused already but who cares it’s awesome
    LINE DRAWING

    View Slide

  179. View Slide

  180. “Animated SVG Headphones” by Chris Gannon :: codepen.io/chrisgannon/pen/zxWowX

    View Slide

  181. 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.

    View Slide

  182. “Draw SVG Graph” by Chris Gannon :: codepen.io/chrisgannon/pen/PwQXgG

    View Slide

  183. amCharts.com
    amCharts.com

    View Slide

  184. View Slide

  185. The original gangsters
    SVG FILTERS
    “The Gooey Effect” by Lucas Bebber :: css-tricks.com/gooey-effect/

    View Slide

  186. 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/

    View Slide

  187. THANKs!
    @chriscoyier
    codepen.io

    View Slide