Designing SVG Web Graphics

Using the <embed> Element

Embedding an SVG image in an XHTML page using the <embed> element is a straightforward process. You use the <embed> tag with the src, type, width, and height attributes specified correctly, and it all pretty much works “out of the box”—at least with the browsers I tested: Internet Explorer 5.5, Netscape 4.7, Netscape 6, and Opera 5. The type attribute for an SVG image is image/svg+xml.

The following example embeds a simple SVG image that you used, in a slightly different version, to look at the nesting of <svg> elements. You see the purpose of using this particular image later in this chapter. You set it against a pale gray background so that you can easily see the boundaries of the SVG and the containing HTML or XHTML ...