What Is SVG and Why Do You Care?

A look at SVGs most compelling features

by Rob Levin


In this short article, we look at some of SVG's most compelling benefits, explain the difference between raster and vector, provide a bit of SVG history, and then finally we finish off with a very simple SVG example.

What Is SVG and Why Do You Care?

If you've been keeping an eye on the “pulse of the web” these days, you've undoubtedly notice that SVG–spelled out: Scalable Vector Graphics–is experiencing an amazing resurgence on the web. Let's examine what exactly this SVG thing is, and why you need to start learning more about it now.

SVG Benefits

Perhaps you've already played around a bit with SVG–or, perhaps not–but, either way, it's useful to know exactly what benefits a technology brings to understand exactly how much time is appropriate to invest in it to get maximum ROI. Here are some of the more compelling ones you may be interested in:

These are just some of the benefits, but let's get in to explaining exactly what IS SVG next…

Raster vs. Vector

To understand the Scalable Vector part of SVG, we need to understand what vector is, and contrast it to raster (the more common image counterpart in use).


A simple definition of a raster image is: a rectangular series of pixels, where each pixel defines an RGB color value. This is a simplified (if not dumbed down) definition, but will suffice for our purposes.

The series of pixels described above, is also known as a bitmap. Bitmaps are generally compressed for storage, and then decompressed by a viewing program as needed.

Some popular raster image formats are: JPG (or JPEG), PNG, and GIF. These image formats are prolific and, thus, support for raster images is ubiquitous. This wide-spread usage explains the excellent back support for raster images, and supporting legacy browsers/systems is pretty much a non-issue. However, raster images have some disadvantages:


A vector image is: a series of instructions that describe to a viewing program how to draw shapes comprised of lines and curves. These instructions map to a series of grid points (aka coordinates) where the lines or curves are to be drawn.

Box Model
Raster (pixelated edges) vs. Vector (crisp edges)

In the above image, we've purposely scaled up both the raster and vector versions of the same original graphic. Notice that, while the vector remains crisp, the raster image exhibits jagged edges and pixelation.


Interestingly, the actual rendered vector image, is rendered as a raster image by the viewing program, since: all modern displays are raster-oriented

However, due to the way vector graphics are defined (as a series of commands or instructions at geometric points), the rendering engine can achieve feats such as zooming via some simple multiplication and a redraw. This fact, makes SVG wonderful when it comes to, ahem, scalability.

While vector-based graphics are not as ubiquitous as raster, they have some definite advantages:


SVG became an open standard in 1998, and had an early upswing in about 2001 when Adobe released the SVG Viewer 3. By 2005, SVG was becoming quite popular, but Adobe adopted Flash making SVG a lesser priority. Then, in 2008, Apple publicly denounces and blocks Flash from iOS products resulting in all “web folk” becoming enamored by the promise of HTML5. By 2010, we see IE9 start to support SVG, and in 2011 Retina, 2012 Android, and since then, a general up-swing in the number of form factors and resolutions that need to be supported. I believe these last points, plus decent overall cross browser support, have put SVG back on the hot list of the web's tech trends.

The following is a timeline representation of the historical data mentioned above (and created with SVG itself) by the W3C Developer Relations Lead, Doug Schepers / @shepazu. I first saw this while attending Doug's Frontend Masters SVG Workshop. Doug was kind enough to let us use it here (thanks!). I did make some small alterations to the CSS to make it fit our site and be responsive, hopefully preserving Doug's original artistic and aesthetic intent!

The Rise and Fall and Rise of SVG The Rise and Fall and Rise of SVG Number of people using SVG Not ManyA lot! 1998 SVG begins 2001 Adobe SVG Viewer 3 2005 Adobe adopts Flash 2008 Apple blocks Flash 2010 IE9 2011 Retina 2012 Android 2014 Today

SVG Example Usages

Some practical uses for SVG on the web are:

Two more links I'd recommend having a look at for some major inspiration are: this demo by Petr Tichy, and the articles tagged svg on the Codedrops site which are always quite appealing.

SVG Basics

Hopefully I've convinced you that an investment in learning the basics of SVG is worthwhile. I'll leave you with a very simplistic example of SVG, but encourage you to read my other article on SVG Basics to learn more. To keep things simple, I've cheated a bit with the code snippet below excluding some things I did to make the SVG “responsive”, which entails a couple of techniques that would only confuse at this point. For now, just assume that the SVG dimensions have been set to 64 x 64 relative units, and that the circle's center points are located at the center of that.

  <circle cx="32" cy="32" r="20" stroke="#08BCD0" stroke-width="4" fill="none" />
A Stroked SVG Circle