O'Reilly logo

High Performance Images by Mike McCall, Nick Doyle, Guy Podjarny, Yoav Weiss, Tim Kadlec, Colin Bendell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 6. SVG and Vector Images

So far our focus has been on raster image formats—and for good reason. Raster formats are the dominant image format on the Web. They’re capable of representing highly detailed and photographic images, whereas vector formats are not. Combine that with the large ecosystem of tooling and editors supporting them, and it’s little wonder that they’ve reigned supreme.

However, raster images are not without limitations. They don’t scale well, and there is an almost linear relationship between display size and file size. Both of these issues have become glaringly obvious thanks to the rapid increase in the diversity of devices accessing the Web. Confronted with the variety of screen sizes being used, web designers and developers have become painfully aware of these issues. There have been two major outcomes of this:

  • New responsive image standards have evolved.

  • There has been an increased interest in vector formats, most notably the Scalable Vector Graphics (SVG) format.

We will be discussing the responsive image standards in Chapter 11, Responsive Images. In this chapter, let’s take a look at how vector formats overcome the limits of raster formats, and how and when to use them.

The Trouble with Raster Formats

As we saw in Chapter 2, raster images are composed of a matrix of pixels. This matrix matches the dimensions of the actual image, and each cell represents a single pixel of the image. While this matrix enables raster formats to represent ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required