A Shortcut into the Meat of SVG

If you want to skip all my prose, here is the meat of the shortcut: See Adobe’s hype page for SVG. Those with a sense of what is possible with PostScript will find it attractive. The xmlification has turned the imperative PostScript language into a declarative language. This is probably usually good.

The official definition (the bible hereinafter) is couched in many layers of protocols and formats which go by names such as html, DOC, JavaScript, sgml, http, css, xml, xhtml, SYMM, SMIL and others whose names escape me. It is not even clear from the bible which of these are relevant to simple svg applications until one has delved into each. I hope this page will help those who do not wish to become familiar with most of those. I assume here that you know enough html to put up a simple web page. I have avoided most of the others myself and the information here is gleaned by example from various sites. We will find useful information in the bible nonetheless. I recommend the .pdf version as Adobe makes pdf look good, naturally.

Here is where I got the plug-in for my browser (IE on a Mac running OS X). Such a plug-in is required for anyone that views a page with SVG content. The installation went smoothly and didn’t seem to break anything else. Most recent browsers need no plug-in.

SVG takes its geometric concepts from PostScript and a very pretty book from Adobe presents those ideas very well. None of the PostScript syntax details apply to SVG but most of the graphics and geometry concepts do. Perhaps the geometric concepts are also accessible from the bible as well.

The simple scheme that I illustrate here by example is an ordinary html page with an embed tag within which is the URL for a file whose name ends in “.svg”. (You might look at Netscape’s description of the rules for the embed tag.) embed tags seem limited to files whose content is interpreted by a “plug-in”, but that is just what svg is, for now. Look at section 2.3 of the bible for alternatives to embed. The SVG file can look like the following, an example taken verbatim from page 75 of the bible: 

<?xml version="1.1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="4cm"
xmlns="http://www.w3.org/2000/svg">
<desc>Four separate rectangles</desc>
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="3.95cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
And here is an ordinary page holding an embed tag referencing a file with the above content. On my 400 MHz Mac it takes about 2 seconds after the text shows, to show the image, for the first svg image after launching the browser. It takes about 1/2 second thereafter. This is with no network connection and a cleared cache. This means that the URLs within this sample SVG are honorary. Someday I will experiment with changing those, but just now I don’t want to know.

Already you can control click on the Mac, or left click on windows to scale the image. This is a fundamental advantage over bitmap images.

Now we start to play with the content of the .svg file. The “/>” construct at the end of the tags is required in every xml tag which has no matching end tag such as </rect>. This means that the “/” in the “/>” means that no </rect> is needed. Unlike html, one of the two is always required. In xml, and thus svg, an element is either a tag ending in “/>” or a tag without up to a matching tag starting with “</”, and everything in between. Elements are often within other elements. You may need to know this to understand parts of the bible.

We search in the bible for “rect” with the acrobat reader’s find command, to find similar tricks nearby. Lets try the ellipse at the bottom of page 200. Most of page 201 relates the parameters whose values define an ellipse. We duplicate our first svg file with mods and make an html page for all our samples. You can see the content of the svg file by the browser’s View Source function by control clicking the image, (On windows ??). If you expand the small ellipse then with the Mac DigitalColor Meter, a program, you can see that the enlarged image is anti aliased after scaling!

Aha! another example on page 225:
and try this in html!

A cool SVG application!