Browser Support .SVG

Question

I am working on a responsive design and I am thinking of creating navigation icons as .svg files. What is current browser support, and is there a workaround / plugin for older versions of the browser?

Answer 1

All major browsers have had support for many years except <= IE8. A workaround could be, for example, RaphaelJS.

Sources:

• http://caniuse.com/#search=svg
• https://github.com/DmitryBaranovskiy/raphael

Answer 2

The SVG specification is extensive, and no browser currently supports the entire specification. Moreover, all the latest versions of all major browsers have basic support for SVG . Since none of them has full support, you will need to check the individual functions in each browser that you are targeting. If you only draw basic shapes and don’t use more complex functions (like filters, animations, etc.), you probably won't have any problems.

Here you can find the full browser compatibility matrix .

The workaround for older versions of IE is to use VML . If IE6 support is required and you draw with code, then Raphael.js will do this compatibility check for you and do it using VML or SVG when necessary, but if you download an raw SVG file and use it as an image source that won't work .

Another option for older browsers is to use the canvg JavaScript library . This is a pure SVG JavaScript parser that will make the resulting image on the canvas, but it may be redundant.

Answer 3

• caniuse.com - SVG

edited: I used a link to a very good SVG comparison table, but it has not been updated since 2011, so it is no longer relevant.

Answer 4

... or you can allow apache server:

RewriteEngine On RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\. RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$ RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L] 

you only need to create .png versions of each .svg file, and it does not matter if the file is for css background or for the img tag.

Answer 5

It's worth noting that if you need <= IE8 support, you can implement GoogleChromeFrame easily enough to get the SVG support you're looking for ...

Although you may find that each browser has its own quirks regarding specification features. I had problems with dynamically created nodes that use filters, and animateMotion has been distorted for too long in Google Chrome ... (for this reason we use FF5 + as our interactive interfaces, Safari is getting better too)

IMO, if the whole application is not SVG, I would just use PNG for your icons if you don't want them to scale nicely! :)

... but if you just want to play with SVG, Giv'er !;)

Answer 6

¡C element of the object!

 <object data="example.svg" type="image/svg+xml"> <!-- If browser don't soport / don't find SVG --> <img src="example.png" alt="Logotype" /> </object> 

Answer 7

You could also use SVG in general for all images. This way you will cover all the retina stuff on iDevices. Other devices will follow sooner or later.

For browsers that do not support svg, you can give the body a "no-svg" class.

In your css just add '.no-svg.yourimageclass' and put png instead. (redefine it)

The HTML5 boilerplate gives you this no-svg class already by default with some javascript magic. (e.g. for IE8)

Answer 8

If I work with <img> elements (as opposed to CSS background images), I use a convenient workaround, a combination of Modernizr (a JavaScript library that detects the availability of certain functions , such as .svg support, in browsers) and several jQuery lines:

 $(".no-svg img").each(function() { var $this = $(this); if ($this.attr("src").indexOf(".svg") > -1) { var isSvg = $this.attr("src").toString(); var isPng = isSvg.replace(".svg", ".png"); $this.attr("src", isPng); } }); 

1) I create a .png version of each .svg file. 2) Modernizr provides the html element with the .no-svg class if it detects that there is no .svg support. 3) jQuery swaps file extensions. .indexOf(".svg") checks if the string ".svg" is contained within the src value, returning -1 if it does not find it and a positive integer if that happens. If it finds ".svg" , the entire src string is pulled into isSvg , and .replace() changes .svg to .png and saves the result as isPng , which is then set to src .

Answer 9

For background images, here you can easily drop the PNG background for older browsers:

http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/

Answer 10

You can use caniuse.js script to determine if your browsers support SVG or not:

 caniuse.svg()