Easiest way to embed SVG/SVGZ Vector Graphics in HTML website (for all major 2016 browsers)

Question

What is the easiest way to embed vector SVG or compresed SVGZ illustrations in a website?
It must work correctly under 2016 versions of Firefox, Chrome, Opera and Safari and Internet Explorer.

Solution 1

this will help you...

<embed src="svg.svgz" width="200px" height="200px" type="image/svg+xml" /> 

Solution 2

IE8 does not support SVG in any way (without additional libraries, like SVGWeb), so you're not going to get it to work whatever your markup.

Although the method you describe works well, I personally prefer to include my SVG inline in XHTML, as it allows me to mix CSS styles for the HTML and SVG together, and provide full JavaScript intermingling. I have an example of this here: http://phrogz.net/svg/3-point-circle.xhtml

Be sure to serve .xhtml files as Content-Type:application/xhtml+xml from your web server.

Solution 3

You can transform SVG into Raphael.is That will make it work in IE6 and up as well as Webkit browsers. Just look at this image, when you finished click on the links to get to the page and the SVGTOHTML tool. Not sure about SVGZ but these files are pretty compact and work on SVG for Webkit and aching called VML in proprietary IE.

http://www.irunmywebsite.com/raphael/teacup.php Apologies for spelling typing on iPod!

Solution 4

You could use svgweb, a toolkit that creates crossbrowser compatible SVG embeds. For IE it automatically creates a Flash file.

http://code.google.com/p/svgweb/

View more solutions