Chapter 8 Using CSS with SVG

So far we've talked about using CSS with HTML, but we can also use CSS with SVG, or Scalable Vector Graphics. With CSS, we can change the appearance of SVG based on user interaction. We can use the same SVG document in multiple places, showing or hiding portions of it based on the width of the viewport.

Before we go any further, however, let's talk about what SVG is and why you should use it.

Vector Images versus Raster Images

Most of the images currently used on the Web are raster images, also known as bitmap images. Raster images are made up of pixels on a fixed grid, with a set number of pixels per inch. JPEG, WebP, GIF, and PNG are all examples of raster image formats.

Raster images are resolution ...

Get CSS Master now with O’Reilly online learning.

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