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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.