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>
- Can be added to a page using
- 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
- A graphics format; in some ways, like others
- 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:
- Charts and graphs
- Shape morphing
- Line drawing
- Animate your interface
- 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
- Do art
- Diagrams—Explain something with a simple graphic
- Headline lockups
- SVG in the real world
- Explain your product
Additional Speaker Links and Resources
- Charts and graphs
- Highcharts.com
- Animated SVGs: Custom easing and timing
- Chartist.js, An Open-Source Library For Responsive Charts
- Interactive SVG Info Graph
- Simple SVG Charts
- Dynamic Area Series with Min/Max
- JavaScript Charts & Maps – amCharts
- Shape morphing
- Line drawing
- Animate your interface
- The best icon system ever
- Do art
- Diagrams—Explain something with a simple graphic
- Headline lockups
- SVG in the real world
- Explain your product