SVG Essentials, 2nd Edition

Chapter 2. Using SVG in Web Pages

John Donne said that no man is an island, and likewise SVG does not exist in isolation. Of course, you can view SVG images on their own, as an independent file in your web browser or SVG viewer. Many of the examples in this book work that way. But in other cases, you will want your graphic to be integrated in a larger document, which contains paragraphs of text, forms, or other content that cannot easily be displayed using SVG alone. This chapter describes various ways of integrating SVG within HTML and other document types.

Figure 2-1 shows the cat drawing from the previous chapter, inserted into an HTML page in four different ways. The results look almost identical, but each method has benefits and limitations.

SVG as an Image

SVG is an image format, and as such it can be included in HTML pages in the same ways as other image types. There are two approaches: you can include the image within the HTML markup in an <img> element (recommended when the image is a fundamental part of the page’s content); or you can insert the image as a CSS style property of another element (recommended when the image is primarily decorative).

Regardless of which method you use, including SVG as an image imposes certain limitations. The image will be rendered (“drawn” in the sense that the SVG code is converted to a raster image for display) separately from the main web page, and there is no way to communicate between the two. Styles defined on the main web page will have ...