SVG and Its Addictiveness

I spent much of today staring at my computer, tweaking little bits of markup. Why? I rediscovered SVG! For many of you, this may just be an empty abbreviation. So let me explain.

SVG stands for Scalable Vector Graphics. It is a W3 specification, so those of you who are that uptight about standards can stay calm. But what does that mean? Essentially, it means that it's an image format where you can scale it as much as you want. It'll look just as good at 100x zoom as at 300x. This is the advantage of vector graphics formats, such as SVG and MathML, over raster graphics formats, like PNG or JPEG.

So, you want to know how to use this magical format? It's a dialect of XML, so it's pretty easy.
You start off like any other XML document:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Then, you go on to declare the actual SVG document.

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Now the real fun starts. You can draw pretty much any shape imaginable and some text. And you can use CSS!

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
circle {
    fill: red;
    stroke: blue;
    stroke-width: 2px;
}
text {
    font-size: 20px;
}
]]>
</style>
<circle cx="65" cy="65" r="60" />
<a xlink:href="http://g3n3r0.blogspot.com/">
<text x="5" y="150">
G3n3r0 is amazing!
</text>
</a>
</svg>
In order for this example to work, you have to remember to add the xlink namespace in the <svg> element. This is only a basic example. You can find a lot more by Googling around. I also set up a more fully-featured demo here.
<(^.^)>