Here’s the deal: there’s no reasonable excuse to avoid using SVG for vector graphics on the Web (with a PNG fallback, primarily for IE < 9 and older Android).
While there are legitimate design problems when using one single file with icons at multiple sizes, this is not unique to SVG and in the land of — for all intents and purposes — infinite zoom levels and resolution densities, retreating back to a single “pixel-perfect” bitmap is not a better option. Cross browser support for media queries with SVG may one day solve this issue. For now, just use multiple files for an icon used at vastly different sizes (you’d have to do that anyway with bitmaps).
Have a look at The Font Bureau’s type specimen for Neue Haas Grotesk. A perfect example of when SVG just makes sense. Another great place to start using SVG is with a website’s logo. That little brand mark that probably reigns in the top-left corner of a website? I’m sure the client would love to see that nice and crisp. Just do it already!
I know SVG is not perfect. There’s no hinting; the holy grail of pixel-perfection cannot be guaranteed. There’s annoying browser bugs that potentially mess up the whole scalability thing. But when you actually compare an SVG to a PNG implementation across multiple devices there’s only one winner. A bitmap offers a single point at which it isn’t blurred, vectors increase that range indefinitely.
When using SVG with a CSS
background-image providing a fallback using the fine art of feature detection is very easy. Use Modernizr to add the
.svg class to the
<html> element then you have a hook to specify both sources. If the class is added before the default styles are applied modern browsers won’t download both images or flash any content (so put Modernizr in your
SVG is here and it’s widely supported.
Oh! By the way, if you do know a legitimate reason to avoid SVG leave a comment :)