As an avid Adobe Illustrator user for the past 15 years, I think it’s safe to say that I love the vector format. That’s why I’m excited SVG is gaining traction.
The good
The many benefits of SVG:
- Scale without quality loss
- Smaller file sizes
- Is simply an XML file; you can open an SVG in a text editor and edit the code.
- Can be styled with CSS; colours can be changed, elements hidden, allowing a single image to be used for multiple purposes.
- Animation
The bad
Nothing’s perfect, and browser support for SVG is no exception;
- Quirky behaviour in some modern browsers
- Old browsers lack support (IE prior to version 9, Android prior to version 4)
- The way you load an image affects whether or not it can be styled with external stylesheets
- It can be tricky to wrap your head around the way viewBox works
The resources
If you’re interested in the SVG format, below are some great resources to help you get started.
A great place to start, with overviews of browser support, CSS integration, and the various methods of loading SVG on your site.
Can I Use – SVG Browser Support
Helpful table indicating browser support for SVG
StackOverflow – Optimal Settings for Illustrator Export
The title says it all, a short guide to exporting SVG from Illustrator.
Making Sense of SVG viewBox’s Madness
Helpful examples that explain how and why viewBox works the way it does.
An Adobe backed SVG Javascript framework for loading and animating SVG in modern browsers. Be sure to check out their demos.
SnapSVG’s older brother. Written by the same developer, Dmitry Baranovskiy, Raphael is a little heftier in the codebase than Snap, but includes support for older browsers.
An extensive collection of standard interface icons in browser ready SVG format.