Wednesday, 27th June 2012
Adding an SVG to a webpage
There are four main ways to add an SVG into a webpage.
Perhaps the easiest method is to paste your SVG element directly into your HTML directly.
<!doctype html> <html> <body> <svg width="100" height="50"> <circle cx="40" cy="20" r="10" /> </svg> </body> </html>
Although this can be useful if you're generating the HTML somehow, I would generally avoid this method. I think it's much cleaner to have the SVG in a separate file and it make it much easier to add to different pages or email to someone. There can also be issues with interactivity - since the SVG is not separate, mouse events are measured relative to the surrounding HTML and not the SVG, which makes them harder to deal with.
For example, click on the SVG below to see where value of the evt clientX and clientY attributes.
You can add your SVG using an iframe. This method is generally frowned upon and is not allowed in HTML4. It also creates a weird border around the image.
<iframe src="svgfile.svg" />
This is the method I tend to use. I can't see any difference between it and
<object data="svgfile.svg" type="image/svg+xml"></object>
This is pretty much the same as above.
<embed src="svgfile.svg" type="image/svg+xml" />