Embedding an SVG Drawing in a Web Page | Sams Teach Yourself XML in 24 Hours, Complete Starter Kit (3rd Edition)

Although you can view SVG documents directly in browsers that have the appropriate plug-in installed, you might prefer referencing an SVG drawing as part of a larger web page. To do so, you must embed a reference to the SVG document in an HTML document, where it is displayed in the context of the web page (see Listing 6.11).

Listing 6.11. An SVG Document Embedded in an HTML Web Page

 1: <html>  2: <head>  3:   <title>A Great Shape</title>  4: </head>  5:  6: <body>  7:   <h1>A Great Shape</h1>  8:     <embed width="600" height="600" src="/books/4/41/1/html/2/Ellipse.svg" align="left"  9:       pluginspage="http://www.adobe.com/svg/viewer/install/"> 10: </body> 11: </html>

This code describes a web page that includes an SVG graphic much as you might include a bitmap image using the HTML <img> tag. Don't forget that it will work only if the browser includes built-in support for SVG or if a suitable SVG viewer plug-in is installed in the browser. Let's hope that this issue diminishes in significance as the major browsers begin adopting native support for SVG. Until then, you may want to encourage end users to download an SVG plug-in if you plan on serving web pages with SVG graphics.

By the Way

If this example seems a bit novel, allow me to point out that in Hour 17, "SAX: The Simple API for XML," you learn how to translate raw XML data from any document into meaningful SVG graphics.