Should I use SVG graphics when I can or is support for them too varied or uncertain?

Question

I want to use only SVG graphics on my site wherever I can but it seems like support has been inconsistent in the past. Is SVG support finally stabilizing across browsers, or am I still going to have to hedge my bets with a PNG for the foreseeable future?

Clarification: By "SVG graphics" I mean primarily things that one would find in a logo, e.g. customized font, sweeping brush strokes, maybe gradients. All easily represented in SVG, but I find myself exporting PNGs at every dimension a logo appears at to ensure browser inconsistencies in rendering SVGs don't cause the logo to appear different. But the SVG spec is well defined and I'm doing the exact same thing in Inkscape to get the PNGs and I feel like a crazy person; any browser should be able to do this for me in a consistent way, right?

Answer 1

There's a few types of SVG usages but since you mention PNG I'll assume you mean basic use of HTML SVG Images.

Current versions of majors browsers that support SVG in an HTML img element:

• Internet Explorer 9+
• Mozilla Firefox 19.0+
• Google Chrome 25.0+
• Safari 5.1+
• Opera 12.1+
• iOS Safari 3.2+
• Opera Mini 5.0+
• Android Browser 3.0+
• Blackberry Browser 7.0+

The problem with using purely SVG graphics and no fall backs is that visitors with older browsers will not be able to view your site, to give you an example Internet Explorer 8 does not support SVG and this browser isn't that old and is still widely used. You should consider a fallback system for those who can't render the SVG graphics if you want to cater for most visitors.