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
Tweet

More Decks by Chris Coyier

Other Decks in Design

Transcript

  1. CHRIS COYIER

    View full-size slide

  2. mycockpit.club

    View full-size slide

  3. SLIDE TO SEEM TIMELY AND RELEVANT

    View full-size slide

  4. 13.9K
    13.9K
    13.9K
    13.9K

    View full-size slide

  5. Sharp at any size or resolution
    Small in file size
    SVG is

    View full-size slide

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

    View full-size slide

  7. Big Promises / Can’t Use

    View full-size slide

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

    View full-size slide

  9. Well-supported

    View full-size slide

  10. Even if you need to go deeper, it’s not
    that bad. We’ll get into that in a bit.

    View full-size slide

  11. HEY
    that looks like
    HTML
    (It’s XML)

    View full-size slide

  12. SVG syntax can be learned!
    Unlike any other image format.
    (You don’t “learn” JPG, unless you’re like Rain Man.)

    View full-size slide

  13. SVG can be made from
    essentially anything “vector”.
    .eps / .pdf / .ai / .whatever
    open in Illustrator, Save As .svg

    View full-size slide

  14. “Scaleable Vector Graphics”
    SVG can be made from
    essentially anything “vector”.

    View full-size slide

  15. SVG will never replace
    raster graphics.

    View full-size slide

  16. Rasterfarian GET IT?!
    (This image would be very bad at being vector.)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. How do you get
    SVG to use?

    View full-size slide

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

    View full-size slide

  21. Basic Shapes




    View full-size slide

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

    View full-size slide

  23. (p.s. you can copy and paste SVG out of Illustrator CC)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. WebCode
    $39.99

    View full-size slide

  27. Inkscape
    Free

    View full-size slide

  28. 3
    Go snag some vector stuff
    off the internet.

    View full-size slide

  29. • Adjust colors
    • Change artboard size
    • Remove cruft
    • Save it

    View full-size slide

  30. http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

    View full-size slide

  31. How to Use SVG
    LIKE, ON WEBPAGES YA TEAMSTERS

    View full-size slide


  32. SVG-as-img
    HTML

    View full-size slide

  33. SVG-as-img
    HTML

    View full-size slide

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

    View full-size slide

  35. html5hub.com/#i.5cx78814yheb6u

    View full-size slide

  36. AddType image/svg+xml .svg .svgz
    .htaccess
    css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/
    content-type fix

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. You can put right up in
    your , homegirl.
    Inline SVG

    View full-size slide

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

    View full-size slide

  42. SVG Templating
    Using inline as an icon system

    View full-size slide

  43. Sites need a system for icons.

    View full-size slide

  44. 2014.cssconf.com
    codepen.io/elrumordelaluz/pen/dhwLi

    View full-size slide

  45. Even better, let’s get that block of SVG
    out of the HTML entirely.

    View full-size slide




  46. browser caching!

    View full-size slide

  47. IE (any version) won’t allow with an external source.
    Jonathan Neal has a fixer-upper script.
    (XHRs in the guts so it’s like straight up inline SVG.)

    View full-size slide

  48. Using instead of
    is even better!

    View full-size slide








  49. Icon of a clamdigger.


    View full-size slide




  50. Icon of a clamdigger.






    Or, do add viewBox if
    you want/need
    width: auto;
    behavior.

    View full-size slide

  51. .specific-icon {
    background: url('svg.svg#svgView(viewBox(0,0,48,41))');
    }




    Fragment Identifiers

    View full-size slide

  52. This is the idea of
    SVG Sprites

    View full-size slide

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

    View full-size slide

  54. codepen.io/chriscoyier/pen/mhaFy

    View full-size slide

  55. Media Queries in CSS + SVG

    View full-size slide

  56. All this stuff is possible on inline SVG.
    You get some advantages of SVG with or
    background-image, but not as many.

    View full-size slide

  57. SVG vs. Icon Fonts
    Cagematch!

    View full-size slide

  58. THE ANCIENT PAST

    View full-size slide

  59. 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 / ::before better
    Accessibility be very careful better,
    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?)

    View full-size slide

  60. Guess which one I like?
    Tip: it’s the one that isn’t icon fonts.

    View full-size slide

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

    View full-size slide

  62. Build Tools
    Don’t freak out.

    View full-size slide

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

    View full-size slide

  64. Raster images
    are a grid of
    pixels so it’s
    easy to
    understand
    they have an
    intrinsic width
    and height.

    View full-size slide

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

    View full-size slide


  66. .buddy {
    width: 400px;
    height: 200px;
    }

    View full-size slide


  67. .buddy {
    width: 200px;
    height: 200px;
    }

    View full-size slide


  68. .buddy {
    width: 200px;
    height: 200px;
    }

    View full-size slide

  69. Dealing with
    Fallbacks
    e.g. dealing with IE 8 and Android 2.3

    View full-size slide

  70. Remember, one kind of fallback
    is nothing.
    Like if you’re using an icon to enhance a word.

    View full-size slide



  71. <br/>svgeezy.init(false, "png");<br/>

    View full-size slide



  72. <br/>svgeezy.init(false, 'png');<br/>

    View full-size slide

  73. codepen.io/chriscoyier/pen/jnsIr

    View full-size slide

  74. codepen.io/chriscoyier/pen/jnsIr

    View full-size slide

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

    View full-size slide





  76. … but, SVG is more well supported than the responsive images stuff is.

    View full-size slide

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

    View full-size slide

  78. Also, background is generally
    decorative and non-vital to content, so no
    fallback is often acceptable.

    View full-size slide

  79. Supporting (most) browsers
    Just leaves alone
    IE 9-11
    Ajax’s in
    IE 6-8

    View full-size slide

  80. Animating SVG
    Let us count the ways.

    View full-size slide

  81. 1. SVG Syntax (“SMIL”)
    2. With CSS @keyframes / transitions
    3. With JavaScript

    View full-size slide



  82. attributeName="points" dur="500ms" to="110,58.2 147.3,0 192.1,29 …”/>


    Save

    View full-size slide

  83. SVG Filters
    & Blend Modes
    The OG of cool web effects.

    View full-size slide







  84. .an-event-apart {
    -webkit-filter: url(#blur);
    filter: url(#blur);
    }

    View full-size slide

  85. SVG Filters
    You can use CSS filters on SVG, but SVG has its own special filters too.

    View full-size slide

  86. Accessible SVG
    Thankfully it ain’t that hard.

    View full-size slide

  87. 1. Use SVG
    2. Use Inline SVG
    3. Provide a and aria-labeledby
    4. Provide a and aria-labeledby
    5. Use
    6. Make links focusable (if parts)
    7. Use ARIA roles
    8. Create alternatives

    View full-size slide

  88. aria-labelledby="title desc">
    Green rectangle

    A light green rectangle with
    rounded corners and a dark green border.


    fill="#90ee90" stroke="#228b22" stroke-fill="1" />
    fill=“#000000">
    Website



    View full-size slide

  89. http://css-tricks.com/svg-text-typographic-designs/

    View full-size slide

  90. @chriscoyier

    View full-size slide