Close Menu

SVGs and You

SVG stands for Scalable Vector Graphics. SVGs are compact XML files capable of rendering graphics in your browser. These XML files can be created and edited by any regular text editor. Indeed, SVG images are made out of text (just like the website you’re viewing right now, in fact)!

An example of SVG XML, and it’s rendered graphic.

<svg>
<line x1="0" y1="100" x2="100" y2="0" 
stroke-width="2" stroke="black" />
</svg>

As you can see in the above XML, the raw code is reasonably descriptive of the rendered image. It contains a line, some x, y coordinates denoting the direction and length of the line, and a black stroke.

If you ever close your eyes and see pictures that have never been drawn or movies that have not yet been made, then SVG might be for you. . . . You can’t depend on your eyes when your imagination is out of focus.

A small history lesson.

SVGs were developed by W3C (the international standards organization for the web), starting in 1998, and finally released in 2001.

July, 1998

SVG working group is chartered

After receiving various proposals, W3C convened a working group for developing what would eventually become the SVG specification.

What makes an SVG different from a JPEG?

SVGs are a versatile format that allows animation, and scalable graphic display. What the heck does that mean? I’ll show you.

This is an SVG.

Notice how crisp the edges are? In fact, even if you were to zoom all the way in, the edges would still be crisp! Now, I’m going to take that same SVG, save it as a JPEG (a bitmapped image format), and show you the difference.

This is a JPEG.

After converting the above SVG to a JPEG, and zooming in, you can see the actual pixels that make up the tail of the Dirigible, and the roundness of the logo. That doesn’t happen with the SVG format, because it’s scalable. It means that these images can look better at more resolutions, simply due to the format it’s saved in!

Advantages of SVGs

Dynamic

Because SVGs are written in XML and are part of the your web page, they can be accessed and animated by other programming languages like JavaScript.

Small

Bitmapped image file sizes are generally huge compared to SVGs. This matters a little less now than it did back in 1998, but it’s still important to save whatever speed you can!

Scalable

Of course, it’s in the name! The core advantage of SVGs over bitmapped image types is it’s ability to scale to fit different sizes, without the pixelation associated with other image types.