Using SVG with CSS3 and HTML5

Chapter 18. Drawing on Demand

Chapter 18. Interactive SVG

If you only think of SVG as a replacement for raster image formats like PNG and JPEG, then you’re only scraping the surface of what SVG can be on the web.

Sure, static SVG has its benefits: small files that are easily updated, accessible text and structured alternative text, crisp curves at any scale or resolution. If that’s all you want, you are still making good use of SVG.

But comparing SVG to static graphics is like comparing HTML websites to printed articles. There is so much that the web can do that print can’t. The web is a dynamic, interactive medium. Web pages can be static content documents, but they can also be software applications, or any combination of the two. And that’s just as true for SVG as for HTML.

This chapter explores the potential for using SVG in interactive web content. It is not in any way a comprehensive discussion of the topic: interactive SVG is as complex a topic as interactive HTML. We cover the main ways in which you can enable and react to user actions—what you do with that is up to you. Interactive SVG can be used in web application interfaces, games, and explorable data visualizations, among many other possibilities.

As we’ve mentioned various times throughout the book, the capabilities of SVG differ depending on how you add that SVG to your HTML. If you use an SVG file as an image, in an <img> tag or as a CSS image type, it will behave as an image. None of the components will be interactive. ...