Best Way To Place SVG Content Within HTML Best Way To Place SVG Content Within HTML xml xml

Best Way To Place SVG Content Within HTML


<embed> I would generally avoid. It's deprecated in HTML4, doesn't allow proper fallback content, and has had a selection of problems in IE.

<object> will allow you to include fallback HTML content for browsers without SVG support. <iframe> will fall back to prompting you to download the .svg file. Which of those is best probably depends on the application.

The other alternative, for modern browsers (including IE from version 9) is to serve your web page as application/xhtml+html and include the SVG elements in the page itself.


for me the best way is this

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >  <image x="0" y="0" height="60" width="60"  xlink:href="huge-red-circle.svg" /></svg>

You can see the example here

source: http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial