Chapter 4: Real World Use of CSS with SVG

by Craig Buckler

SVG is a lightweight vector image format that’s used to display a variety of graphics on the Web and other environments with support for interactivity and animation. In this article, we’ll explore the various ways to use CSS with SVG, and ways to include SVGs in a web page and manipulate them.

The Scalable Vector Graphic (SVG) format has been an open standard since 1999, but browser usage became practical in 2011 following the release of Internet Explorer 9. Today, SVG is well supported across all browsers, although more advanced features can vary.

SVG Benefits

Bitmap images such as PNGs, JPGs and GIFs define the color of individual pixels. An 100x100 PNG image requires 10,000 pixels. ...

Get Modern CSS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.