It is used in Google Maps, Microsoft Visio, wallpapers, Nintendo Wii, real-time charts, SMS animations, pre-press, desktop icons, Wikipedia, (mobile) skins, games, technical drawings and more. The dutch minister of finance demands it on his computer, and that of thousands of colleagues. It has many things in common and/or is easy to combine with world famous technology as HTML, CSS, Javascript, XML, Flash and PDF. You are often looking at it, and a lot more often it is used somewhere in the creative process. Still there's a good chance you've never heard of it: SVG, or Scalable Vector Graphics.
The unfamiliarity is probably because property→brand→marketing doesn't work for an open standard itself, but much more interestesting is what SVG is and why it's used so much:
Images are usually stored as pixels; a color code per dot. The more (mega)pixels, the more disk space the files take, the more detail is possible, but never unlimited. If you later want to convert such images to a different resolution, you will always introduce a certain degree of blur. With vector drawings however the content is described with shapes and coordinates, and only when it is shown, calculated into pixels for the desired size. Below you see what that means for zooming in (on the red bordered area of the middle image).
| zoomed in on pixels: | original: | zoomed in on vectors: |
|
|
||
The original image has been converted (on the server) from the file below:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px" viewBox="0 0 200 200">
<rect fill="yellow" x="0" y="0" width="200" height="200" />
<text stroke="black" fill="black" font-family="Arial" font-size="40" x="100" text-anchor="middle" y="40">try to read</text>
<text stroke="black" fill="black" font-family="Arial" font-size="40" x="100" text-anchor="middle" y="80" font-weight="bold">this</text>
<!-- the arrow --> <path d="M110,95 v40 h20 l -30,30 l -30,-30 h20 v-40 z" fill="black" />
<text font-size="3" font-weight="bold" text-anchor="middle" x="100" y="170">Vector text</text>
</svg>
When you open the file with an SVG viewer you get to see the image, with a text editor you get to see the codes. Just like with HTML (do "view source" in your webbrowser), and it's therefore also easy to generate on the server. Most drawing programs have "Save As SVG" (the popular Inkscape is even especially built for it). So you don't have to see the source code, you can just keep it ‘under the hood’. But as a user you still (indirectly) get a lot of advantages from it, because of the power and ease it brings programmers. As you probably guessed from the list of usages, SVG is much more than just the next graphics format, “Scalable” is pointing at how well it connects to other technology, software and knowledge. As this open standard is not only open with respect to availability and the license of the specification, but also with respect to accessibility, malleability, and conservation of information.
First, Google can read the source code, “Vector text” for example can just be found. So-called Web 2.0 Mash ups, that intelligently combine information from different websites, can also benefit from it. And blind people can read it via text-to-speech or braille output. Don't forget that text can consist of beautiful arty characters, and sentences don't have to be written along a straight line, but still are copied as normal to word processor or mail client. Readable source code does however gives access to more than just the text appearing on your screen. You can also add titles, descriptions, and data(links) to the elements, just as you're used to with XML.
Next to all off-line, server-side and design-time SVG
there's of course more and more SVG put directly on the web (sometimes accompanied by the SVG logo shown left here).
Because then it can also be used interactively in a perfect way.
The browser, however, is a late and hard to take bastion for use of SVG.
As a browser is such a general piece of software,
it can, contrary to other applications, not really limit itself to a partial implementation of the specification,
even though that enables loads of content already.
All modern browsers
have a new release in the near future with which they will again make a fair jump
towards 100% SVG support,
but Internet Explorer needs a
plug-in for the time being.
By live querying and changing SVG, graphically rich (web)applications are possible, which, based on data retrieved from the web continually adapt 'the drawing' they themselves are. Graphically rich doesn't only mean stiff static vector drawings, but also photos, gradients, animations and video. With this conservation of information is again taken into account. With animations, for example, you no longer have to think in frames per second, but you just declare start, end and process in between. The viewer finally will, depending on whether it's running on a fast computer or an old mobile phone, figure out the optimal way to put it on the screen.
Now of course you want to see some examples.
That's easy with a few videos of SVG usage.
If you want to really get into (the newest developments) of this matter,
and/or get to know the community that is as diverse as the subject,
then quickly register for the world conference SVG Open,
which this year takes place in the beautiful
Nuremberg, Germany.
SVG is no miraculous do-it-all, but definitely a cross-platform
do-a-lot that eases cooperation between coders, designers and other users.
With SVG without limitations on the iPhone,
SVG in the most important browser test,
and web applications made free from the browser,
there's a lot more coming.
Auf wiedersehen,
Ruud Steltenpool
Ruud Steltenpool has presented at the SVG Open editions in Tokyo, organised the event in Enschede, and is also helping the organisation of this year's edition in Nuremberg. He has written articles for Opera, gave feedback used in W3C specification updates, and compilated the SVG link resource svg.startpagina.nl He's also taking an active part in svg.org, IRC, soon on svgplanet.com and according to Google a lot more. He also wrote earlier about SVG on livre.nl in “Magical pictures”. Next to SVG he also writes about open standards in general at the University of Twente blog on the subject.
