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="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.
If this example seems a bit novel, allow me to point out that in What is SAX, "SAX: The Simple API for XML," you learn how to translate raw XML data from any document into meaningful SVG graphics.
Summary
In this tutorial, you developed a good foundation in the basic shapes and components that constitute the SVG markup language. Although you explored only the most basic of SVG's abilities, you've been introduced to the rudiments that will enable you to expand into advanced capabilities, such as transformations, links (like image mapping), clipping, and masking. This can serve two audiences: those with modest aspirations, who will be happy for the ability to create simple graphics with a text file, and those who want a glimpse at SVG's underpinnings before embarking on outputting SVG files from a commercial drawing application. Regardless of which camp you fall into, you're hopefully leaving this tutorial with a newfound appreciation for how XML is impacting the look and feel of the Web, not to mention your own web pages.
Q&A
| Q. |
Can I use SVG to create an image on a Web page instead of using a GIF or PNG image file? |
| A. |
Yes, but keep in mind that the benefit to using SVG in this case is the ability to generate an image dynamically. If you are just displaying a static image on a Web page, then a GIF or PNG image will probably work better. However, if you do need to dynamically generate a vector image, then SVG is certainly your answer. |
| Q. |
Is it possible to validate SVG documents? |
| A. |
Absolutely. Just make sure you've referenced the appropriate SVG DTD in your document, and then feed it to the W3C Markup Validation Service at |