About this Site
The purpose of SVG-Whiz!
The intent of SVG-Whiz! is to promote the use of SVG, to provide examples of how to do tasks in SVG, to provide tools for authoring SVG, and to talk about experiments and proposals with SVG. SVG-Whiz! is also the name of one of my tools, a graphical WYSIWYG browser-based SVG editor, written in SVG and ECMAScript, and which can be found in the Tools section.
In order to view the examples on this site, you will need an SVG-capable browser. Mozilla has special builds that support SVG natively, or you can use the Adobe plug-in, ASV version 3.02 or preview release version 6.
What Is SVG?
A brief description of the subject matter.
SVG is an acronym for Scalable Vector Graphics. It's a W3C Recommendation for the creation of graphics for the Web. There are two types of computer graphics, rasters and vectors. Rasters comprise a variety of popular formats such as bitmaps (".bmp"), GIF, JPEG, TIFF, and PNG; a raster image is composed of a pattern of small colored dots, known as pixels. If you zoom in on a raster image, it becomes distorted (or pixelated, so that each dot is visible). By contrast, a vector image will look just as smooth no matter how far you zoom in or out. This is because instead of a series of dots to depict, for instance, a curved line, it uses a mathematical description of the starting point, the ending point, and the shape of the curve.
In fact, however, SVG is not just a vector graphic format, but what is sometimes called a meta-format, or a multimedia format, in a similar manner to Macromedia Flash. It has a variety of graphical filters, gradients, and support for the inclusion of raster images. In the next version of the Specification, version 1.2, there will also be native support for video and even audio. There is also a special extension to the SMIL specification in SVG that allows for animation and interaction. In addition, SVG can be generated and manipulated with script or other programming languages.
SVG is a dialect of XML. XML is a specification for marking up documents in a structured and logical way, and usually encodes the semantics of a source domain. An example of XML looks like this:
<furniture>
<table>
<manufacturer>Calligaris</manufacturer>
<stockNumber id="t374">
<legs number="4">
<material>cherry</material>
</legs>
<top width="2.5ft" height="4ft">
<material>cherry</material>
</legs>
</table>
<chair>
<manufacturer>Vittorio Marchetti</manufacturer>
<stockNumber id="c56-p">
<legs number="4">
<material>aluminum</material>
</legs>
<seat>
<material>leather</material>
</seat>
<back height="low">
<material>leather</material>
</back>
</chair>
</furniture>
SVG is interesting in this way, because unlike many XML dialects that “mark up” textual content, the tags themselves are the content.
Compression and File Size
As mentioned, SVG is written in XML, which does not have among its merits a small file size; it is verbose by its nature. To compensate for this, the SVG Specification has mandated that all conforming SVG UAs can decompress files in the gzip format, which has a non-lossy compression algorithm. This can reduce file size significantly, sometimes by up to 50% smaller. But you can make files even smaller as a matter of authoring practice.
First, making liberal use of the 'use' element will reduce the file size in documents with a large number of duplicated elements, and also allows you to more easily maintain the document. An even more important way to reduce file size is to hand-author the code, or if using a graphical tool like Inkscape or Adobe Illustator, keep an eye on the generated code, and trim it down by hand where possible. You can get rid of extraneous information by rounding up large floating-point numbers, getting rid of proprietary markup, and removing other kruft. The other advantage of authoring at least partly by hand is that you can enforce document semantics.
Semantics
Since SVG is a text-based format, this affords the author the opportunity to embed metadata meaning into the document. SVG has a few nodes that are specifically intended for this purpose, all of which can be applied to any element in SVG, or to the document as a whole:
- 'title': the name of this shape, element, group, or document; this is roughly equivalent to the 'title', 'alt', or 'caption' attributes of HTML.
- 'desc': the description of this shape, element, group, or document; this is roughly equivalent to the 'longdesc' attribute of HTML.
- 'metadata': this rather interesting element allows as child content either text or structured data from another XML dialect (or namespace) or format. You can access this information via script, or a sufficiently-equipped UA can use it; for instance, some builds of the Mozilla browser can access Creative Content licenses.
- 'hint': this is a new element in SVG 1.2 that allows the author to include user interface instructions, which will show up as a tooltip if the element has the 'tooltip' attribute enabled; in functionality, this is roughly equivalent to the 'title' or 'alt' attributes of HTML, but is better than those attributes, in fact, since it is less likely to be misused.
- 'id': the unique identifier of this shape, element, group, or document; just like the 'id' or 'name' attributes of HTML; while it's not the best way to embed semantics, it can be used that way.
In some cases, these semantic elements are not available at a visible or superficial level; they will only be available to the user if the author uses them somehow in script or if the proper UA, such as an accessiblity assistance device, accesses them through the DOM and presents them in an appropriate way, such as reading them out loud. However, this is no reason not to use them. For one thing, it is always good to design from an accessibility standpoint; for another, you never know how your document will be repurposed in the future, or who will need to maintain the code.
The only inherent semantics of SVG are geometrical in nature, dealing with the size, shape, and location of the content presented. In some cases, styling aspects such as color can also add limited meaning.
There is another major way in which semantics are preserved in SVG: text is text. Unlike Macromedia Flash, or raster formats that depict logos, button labels, or other words as just another visual element, SVG lets the user search for, select, and copy all the text in the document. But it doesn't ignore the visual presentation of the text; you can include any font you wish into the SVG, using SVG Fonts.
SVG Fonts
In the past, the author of a Web document had to rely upon a font being installed on the user's system, if they wanted a particular look for the text on the document. Realistically, this limited them to a very narrow range, perhaps only as much as indicating serif or sans serif. Font sizes tended toward distortion on the larger and smaller ends, while SVG can render them smooth at all sizes. Font colors were available, but only as a solid color, while SVG allows gradients and other paint servers on both stroke and fill. And in addition to all these other aspects, you can embed a font into an SVG file, with each glyph represented by a vector shape. You can figure out how to make your own SVG Font in the Tools section.
Why Use SVG?
Why should an author use SVG? There are many reasons. It is an open format, unlike Macromedia Flash, and it is free. It is easy to learn, as shown in my Samples section, and there are many authoring tools available for it. It can be used with the entire family of XML technologies, as a transmission or presentation format. And it is so readily adaptable to scripting that it makes an ideal application programming interface for WebApps. You can see a demonstration of this fact on the Tools page. But the most important reason is one that is not yet realized; in SVG 1.2, the new sXBL technology will allow any XML dialect, in all its domain-specific semantics, to be visually represented in SVG. You can read more about this in my Experiments section.
About the Author
The creator of SVG-Whiz!
Doug Schepers has been programming since his early teens. He has focused on SVG for the past 6 years, developing SVG applications. He is a founding member of Vectoreal, an association of SVG professionals. You can reach him at svg at schepers.cc. If you want to read more about Doug, you can read his personal Web site, Schepers.cc.