Mastering SVG

Directly embedding SVG in an HTML document

In my opinion, the most exciting usage of SVG is as an inline element in an HTML document. While you will learn about SVG images as a separate file format and all the ways that SVG images can be used to develop modern web apps, the largest portion of this book will show you ways to interact with SVG elements embedded directly into the document. This is important because it is not possible to animate or otherwise manipulate the individual elements of an externally-referenced SVG file; this is only possible if the SVG elements are available directly (via the Document Object Model (DOM)) on the page.

The following example shows a simple inline SVG image with three circles and teases one of the most ...