SVG Images On Your Website

SVG - Scalable Vector Graphics

Websites today use many images to enhance the user experience. Most images used were the 'JPEG' file format, which used file compression as a trade off between file storage size and image quality, but some data was always lost when converted to the JPEG format. It was a good solution for photographs and images.

The 'PNG' file format started to become more popular as it did not lose any data when converted. It was superior ti the GIF file format that preceded it. It was a good choice for line drawings, text, and iconic graphics.

The problem with these standard web file formats is that as the image is 'zoomed' in it becomes 'fuzzy', due the pixels increasing in size to fill the screen. These are called 'Raster Graphics' file format, which shows exactly where each pixel is to be placed. Popular web raste formats are Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif).

Eventually another file format 'SVG' (Scalable Vector Graphics) was developed. They generally have small file sizes and are very scalable, which means they do not get 'fuzzy' when 'zoomed' in. The vector images are defined using algorithms, so your computer can render it to the screen without losing image quality. They are ideal for interactivity and animation.

SVG Raster vs Vector

The above images shows the difference between the two. The '.jpeg' image on the left is composed of a fixed set of pixels, while the .svg vector image on the right is composed of a fixed set of shapes. As you can see, when scaling the images, the .svg image retains it's clarity.

You can see it in live action here. Zoom-in on the screen and you can see the differences in image qualtiy I have been taking about.

To Summarize SVG's are:

  • Scalable without losing clarity
  • Great on retina displays
  • Wide spread browser support
  • Small file size
  • Easy to modify an animate
  • Godd for logos, icons, graphs, & simple animations
  • Built-in SEO (google index's SVG's
  • Interactive by Javascript