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.

The code for the HTML page is:

<embed src="chart.svg" name="chart" width="300" height="300"
type="image/svg-xml" pluginspage="https://www.adobe.com/svg/viewer/install/">

SVG is an XML vocabulary, so SVG documents are of type text, with images and fonts to be referenced externally if necessary. The SVG header looks like this:

<?xml version="1.0">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
	"https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300pt" height="300pt">
...
</svg>

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.

Text can be added with a tag by the same name:

<text id="title" x="250" y="0" class="titletext" fill="blue">
Yes or No?
</text>

Text formatting is accomplished using CSS. The CSS needs to be inside the SVG file though, CSS in the embedding HTML page cannot be used:

<style type="text/css">
.titletext {font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 24px;}
</style>

Two bars and a title make up our first SVG chart.

Let's get some shades and animations...

Produced by Michael Claßen

URL: https://www.webreference.com/xml/column49/index.html
Created: Feb 04, 2002
Revised: Feb 04, 2002