SVG

SVG is an important technology for responsive web design as it provides pin-sharp and future-proof graphical assets for all screen resolutions.

Images on the web, with formats such as JPEG, GIF, or PNG, have their visual data saved as set pixels. If you save a graphic in any of those formats with a set width and height and zoom the image to twice its original size or more, their limitations can be easily exposed.

Here’s a screen grab of just that; a PNG image I’ve zoomed into in the browser:

Figure 10.1: The shortcomings of raster images are easy to see on today’s high-definition screens

Can you see how the image looks obviously pixelated? Here is the exact same image saved as a vector image, in SVG format, and zoomed to a similar level:

Figure 10.2: An SVG looks sharp, regardless of the display size

Hopefully, the difference is obvious.

Unless you are dealing with photographic imagery, using SVG rather than JPEG, GIF...