Article

An Introduction to Scalable Vector Graphics (SVG)

March 18, 2008 | Posted by Cody


Wouldn’t it be great to create portable graphic files on the fly, without the need for library extensions or any necessary computation on the part of the server machine? If you think so, I’ve got news for you: you already can. The World Wide Web Consortium (W3C) has been developing the Scalable Vector Graphics (SVG) standard for more than seven years, and it has continued to gain more and more support through web browsers and other applications such as Adobe Illustrator since its initial draft. An SVG file is an XML document used to store a set of instructions that is to be interpreted and drawn by the client machine. Due to this implementation, SVG files are in a human readable format and are therefore easily constructed, parsed, or modified. Additionally all graphic primitives are represented as scalable vectors, meaning a 200 pixel square image can be just as easily drawn as a 1024 pixel square image without the need to send any more information. In other words, a large image can be represented by the same amount of data as its smaller scale counter-part (hence the term scalable vector). Of course, the same limitations of XML still plague the SVG format. The most prominent being the overly verbose definition of elements required by an XML document. This is a notable problem with SVG, as more complex images will require a disproportionally large amount of data with respect to a similar file format (such as PNG). The solution for this is, of course, to compress SVG files using GNU zip (better known as gzip) to remove much of the redundancy of an XML formatted document. This now compressed file format is known as SVGZ; the “Z” standing for “zipped,” and its file extension is used to distinguish it as such. The SVG format has incredible potential. Implementation of interactive CAPTCHA images and games are two of the more exciting areas of SVG development, but this is only the beginning. Expect to see this format grow rapidly as it becomes more widely supported and developers become increasingly proficient in SVG.

Advantages of SVG over bit-mapped image formats (such as GIF or PNG): 1. SVG files are easily modifiable from their original source. 2. They can easily be created on demand. 3. In some cases require less data to represent the same image. 4. Are completely scalable without any loss of quality or increase in file size. 5. Can incorporate HTML/CSS and scripting (including other images). Disadvantages of SVG: 1. Not yet widely supported. 2. A lack of information/documentation on the format. 3. May require more data to represent complex images than other formats. Example of an SVG file: Copy/paste the below XML document into a text editor and save it as “blesta.svg”, then open the file using an SVG supported browser (such as Firefox 1.5 or higher). Note: the text may run off screen below, but should copy/paste fine.

1
2
3
4
5
6
7
8
9
10
11
12
<svg xmlns="http://www.w3.org/2000/svg" width="290" height="210">
<!-- Eyes -->
<rect x="70" y="25" rx="10" ry="10" width="50" height="50" style="fill:#1170A8;" />
<rect x="170" y="25" rx="10" ry="10" width="50" height="50" style="fill:#1170A8;" />
<!-- Mouth -->
<rect x="20" y="100" rx="10" ry="10" width="50" height="50" style="fill:#A5CE62;" />
<rect x="65" y="145" rx="10" ry="10" width="160" height="50" style="fill:#A5CE62;" />
<rect x="220" y="100" rx="10" ry="10" width="50" height="50" style="fill:#A5CE62;" />
<!-- Connect Smile -->
<polygon points="60,150 70,160 80,150 70,140" style="fill:#A5CE62;" />
<polygon points="210,150 220,160 230,150 220,140" style="fill:#A5CE62;" />
</svg>

Interactive Examples: http://srufaculty.sru.edu/david.dailey/svg/graphs30.svg http://srufaculty.sru.edu/david.dailey/svg/angles.html Resources: http://www.w3.org/Graphics/SVG/ http://en.wikipedia.org/wiki/SVG

Tags: