Embedding SVG Examples

	object	iframe	embed	img	CSS background
image
display	yes	yes	yes	yes	yes
animation	yes	yes	yes	yes	no
script	yes	yes	yes	no	no
interactivity	yes	yes	yes	no	no
linking	yes	yes	yes	no	no

Above are various methods of embedding SVG in an HTML page (by reference, not inline). The <object>, <iframe>, and <embed> elements all have essentially the same effect: they establish a new browsing context, with its own DOM and scripting context, and interactivity and declarative animation work as defined in the SVG file. The <img> element displays the SVG, and declarative animation runs, but for security reasons, no script should run, and interactivity (including links) should be suppressed. Similarly, SVG used as a background image referenced through CSS should act the same as that in an <img> element, with the further restriction that declarative animation should not run, which should help performance (and be less distracting); as animation features are added to CSS, this may be reexamined.

To test the examples above, click on the eyes to test linking, and on the face to test declarative interactivity and script execution. The link should replace the image with a blue version of itself (clicking on that will return you to the original image). The declarative (SMIL) interactivity should change the image from shades of yellow to shades of green. The script should fill in the smile (maybe I should have made that SMIL). The other tests are if the image shows at all, and if the left eye is winking (for time-based, rather than interactivity-based, declarative animation).

As of this writing, only Opera performs correctly on all tests. Firefox does not yet support either time- or interactivity-based declarative animation, though the beginnings of that code have been started in the Mozilla codebase. Neither Firefox nor Safari/WebKit show SVG referenced from <img> or CSS, though there are apparently Mozilla builds that do support both those features.