I call SVG (Scalable Vector Graphics) “the forgotten image format” as historically it has been under appreciated and under-utilized by the web development community. 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 finally has SVG support built in, and every other browser, including mobile versions, has long understood the format, meaning that SVG can finally have its day. So what is it?
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. SVG can also be used for fonts.
The primary advantages of SVG are:
SVG images are infinitely scalable, without losing quality or resolution. (For 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).
You can display an SVG file by linking to it with an
<img />tag, just as you would a JPEG, GIF or PNG.
<iframe>methods are also supported, as is use of SVG in CSS background images. (You can also use the
<svg>tag directly on your web page to create the vector image inline).
If you look at an SVG file in a text editor, you’ll see something like this at the start:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id=Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
“But wait!” you’ll say, “This looks just like the opening lines of a full XHTML document!” And you’d be exactly right. It’s just the co-ordinates for drawing shapes and lines in the document that are a little difficult to code by hand: for that reason, it is common to create SVG documents through an application. (Importing, creating, manipulation and export of SVG is well-supported by Adobe Illustrator and Flash, along with other programs).