An Event Apart: “10 Things You Can and Should Do With SVG”

Chris Coyier speaking at An Event Apart Orlando 2016 at Disney’s Contemporary Resort in Walt Disney World on October 4, 2016.

You’re already aware of SVG. You already know it’s a vector image format. But how does that affect your daily life as a front end developer and designer? In this fun, compelling, and information-packed session, Chris will count down 10 things you could (and should!) be doing with SVG. It’s one of those technologies that is chock full of possibilities and benefits, yet conspicuously missing from most people’s toolbelts. Find out why it deserves a prime spot on yours.

Notes

  • What is SVG?
    • A graphics format; in some ways, like others
      • Can be added to a page using <img>
    • But it’s also different; it’s vector, not bitmap/raster
    • SVG draws stuff with math
    • It’s a syntax; you can read it and change it
    • Resolution independent
    • Animatable and scriptable
    • Can be quite accessible
    • Open, standardized format
    • Has pretty good browser support
    • Lots of software for working with it, including many nice JavaScript libraries
  • SVG is still quite underused
  • Learn to reach for SVG
  • “Make the logo bigger”
    • Resolution independent
    • Anywhere you use images that could be vector, use SVG
    • It’s just nice to not worry about image sizes
  • 10 things you can & should do with SVG:
    1. Charts and graphs
    2. Shape morphing
    3. Line drawing
    4. Animate your interface
    5. The best icon system ever
      • <symbol> elemtent—specifically for defining little parts of SVG to re-use wherever you need them
        • <svg><symbol id="icon-x" viewBox="0 0 100 100"> <title>Close</title><path d="…" /></symbol></svg>
        • <svg><use xlink:href="#icon-x" /></svg>
      • Just a few reasons SVG icons are awesome:
        • Vector, plus crisp rendering
        • Strong CSS control—multi-color, strokes, animation
        • Match font-size with width: 1em;
        • Match color with color: currentColor;
        • Compared to icon fonts… less frustration positioning, easier to make accessible, less ways to fail/less weird to load
      • Grunticon—a Grunt.js task that makes it easy to use SVGs
    6. Do art
    7. Diagrams—Explain something with a simple graphic
    8. Headline lockups
    9. SVG in the real world
    10. Explain your product

Additional Speaker Links and Resources

Related Links