I call SVG (Scalable Vector Graphics) “the forgotten image format” as it has been under appreciated and under-utilized by the web development community until very recently. This is no fault of the format itself, which has been around since 1999; the lack of use has been almost entirely due to poor browser support, most especially from (can you guess?) Internet Explorer.

However, IE9+ has SVG support built in, and every other popular browser, including mobile versions, understands the format, meaning that SVG is finally having its day.

So What Is SVG?

As the acronym suggests, SVG is a vector format. Vector images consist of lines, strokes, and areas filled with color: think of maps, most logos, diagrams, illustrations, and the like. The primary advantages of SVG are:

• SVG images are infinitely scalable, without losing quality or resolution. (As one example, scale this page while watching the SVG drawing of Homer Simpson above.)
• SVG is created using XML, so it is free and open (no one entity “owns” the format) – you can create SVG images using a plain text editor like Notepad. For this reason, you’ll often find SVG used in open source or community endeavours: all logos and many diagrams on Wikipedia are in SVG, for example.
• Because it is vector, the file size tends to be small. (SVG can be compressed even further using gzip).
• SVG is part of the DOM, meaning it can be read and manipulated by JavaScript and styled with CSS: it can be used for animation, interactivity, and in many other contexts.
• You can display an SVG file by linking to it in an <img> tag, just as you would a JPEG, GIF or PNG or as a CSS background image. You can also use the <svg> tag directly on your web page to create vector content inline.

Whether created with an application, borrowed from another source or hand-coded, you need to get SVG on a web page in order to be seen at all… the details of which are discussed in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.