Best Way To Place SVG Content Within HTML

Question

From my research, i understand there are three ways to place an svg file inside HTML:

using embed:

Answer 1

<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.

Answer 2

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