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.

CSS-Tricks – Using SVG

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.

Snap SVG

An Adobe backed SVG Javascript framework for loading and animating SVG in modern browsers. Be sure to check out their demos.

Raphael

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.

Iconic

An extensive collection of standard interface icons in browser ready SVG format.

The post SVG: The most exciting format since the Animated GIF appeared first on Say Yeah!.