Scalable Vector Graphics are Cool

[Demonstration image by Yug from Wikipedia]

Scalable Vector Graphics is quite a versatile format. SVG does more than just describe shapes and curves. It has things such as basic shape objects, hyperlinking, png and jpg embedding, font creation and usage, animation, and even the ability to write JavaScript for interactivity.

SVG has a few basic shapes available that in most cases are easier to work with than the equivalent path data. Basic shapes include rectangles, circles, ellipses, lines, and polygons. With these basic shapes, simple programs don't have to know how to form the correct B├ęzier curves just to create a circle. For example the following are equivalent:

<circle cx="7" cy="7" r="5" />
<path d="M 12,7 C 12,9.76 9.76,12 7,12 C 4.24,12 2,9.76 2,7 C 2,4.24 4.24,2 7,2 C 9.76,2 12,4.24 12,7 z" />

Because SVG is a XML based file format, it can use features from other XML based things. Objects can have clickable links just like in HTML. So one can theoretically make a whole website out of SVG files. Matter of fact, one can have SVG inside the XHTML file by the use of XML namespaces. In fact I'll do just that right here.

Hi, from Johnathan

Another cool feature of SVG is the embedding of images. Normally images are just referenced in SVGs just like in HTML, but there is a thing called data URI. Data URIs is a way to embed data in a place were there would just be a reference. This URI then can be placed in the href attribute of the anchor element for both HTML and SVG.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAGAQMAAAAFTAcUAAAAAXNSR0IArs4c6QAAAAZQTFRF////AAAAVcLTfgAAAB9JREFUCNdjYAABFxUFBYaEsrAAhhDV1AQgYWIAFgcAPzkEQEXuergAAAAASUVORK5CYII=

SVG has three other cool features that I have yet to test out. There's the ability to make your own font one glyph at a time. This could be interesting of I wanted to make some exotic font using only triangles. There's also the ability to animate nearly everything with time based key framing that's not dependent on frames. It's called SMIL, and I want to do my next animation this way. Last of all there's JavaScript.

There's this online program that can make basic SVG files right inside of your web browser. The program is called SVG Edit. It would be interesting to see what you could make with this.