SVG - Open for Business(1/2) - exploring XML

SVG - Open for Business

Scalable Vector Graphics are the prime technology for presentations
and business charts. Pie charts, bar graphs, animated or static,
values manipulated by the user or static, SVG can do all. And what is
missing, added CSS and JavaScript will do.

In this introduction we'll generate a bar chart with text, shadows,
and some simple animation.

Getting started

Integrating an SVG file into an HTML page is done with the embed
tag available in all current browsers. This tag includes a reference
to Adobe's plug-in download page, where an appropriate viewer is
available for free. Additional arguments are the reference to the
SVG file, and the pixel dimensions of the object in the browser page.

We have now picked 300x300 pixels for both the graphics and the window. The Adobe viewer does not automatically scale the graphics according to the browser dimensions, but supports free zooming and scrolling of the drawing inside the browser window.

Conventions have it that SVG files are saved with an .svg extension,
and .svgz if compressed for better delivery through Web servers.
Of course you are technically free to choose any file name you like.

Graphics structure

There are many drawing tools available that can generate SVG,
both commercial and open source.
A
list of implementations is maintained by the W3C.

Coding SVG by hand is straightforward for simple objects, such as
rectangles:

<rect x="0" y="0" width="100" height="200" fill="blue"/>

Colors can also be specified with hex triplets like #0000FF for blue. The Z-Index of SVG-elements is assigned from top to bottom,
so background elements come first, followed by the foreground.