SVG - Scalable Vectorial Graphics

Introduction to SVG
SVG examples in this site
W3C SVG Specification
W3C SVG Page
Download Adobe SVG viewer (Or get one for Win IE 4.0-5.0/NN 4.0-4.73 here)
See Adobe recommendation for this page
Back to Nilo Stolte Home Page


The SVG is a W3C norm for vectorial graphics on the Web. It is an open ASCII format that allows 2D interactive vectorial graphics through events (mouse, keyboard, etc. are previewed) processed by JavaScript.

After the failure of NeWS (Openwin-Sun) and the Display PostScript (Adobe) to impose PostScript, the de facto laser printers standard language, as a vectorial graphics standard on monitors, Sun introduced Java as an open machine-independent object-oriented programming language. Java and its almost twin brother, JavaSript, became very popular on web-driven applications. It lacked, though, the power of the PostScript as far as graphics (vectorial or not) are concerned.

Since PostScript lacked structure for random access and for dynamic modifications of documents on-screen, Adobe proposed PDF, as its name says, it is a "Portable Document Format". But PDF did not quite fit on the web because it accepts non ASCII characters and binary compression, too complex to be digested by search engines.

The XML then started to show up, proposing a quite high level document structure, called DOM (Document Object Model), internaly representing a document through a tree where each node can be modified through a stardard interface. SVG was, then, proposed to be the XML vectorial graphics component, being sustained by a number of industrial representatives (including Adobe and Sun).

The impact of SVG on the web is going to be significant. First of all, documents can be shown on the screen the same way they would be on paper (WYSIWYG). Electronic books or electronic documents will all have a standard format compatible with every machine. But this is probably not all. If the industry adopt XML as a general standard we will probably see windowing systems based on XML-JavaSript-SVG, since XML will supply binding for most programming languages (C++, Java, etc.) Applications with GUIs (Graphical User Interfaces) based on this standard will be automatically E-Commerce ready.

Examples in this site:


This example introduces the octree data structure through an interactive diagram, showing its representation in memory as well as in 3D space, and a formated explanatory text. Moving the mouse over any octree node (in memory or in the 3D space) makes it glow in both representations. This explicitly shows the correspondence between nodes in both representations. Clicking the left mouse buttom over one of the last level nodes, a voxel, in the memory representation shows a grid that decomposes the voxel coordinates to obtain the indexes to follow in each octree level to be able to reach the voxel.

The text was typed in Word, using Helvetica font size 10, and formated in three columns, right justified. The conversion to SVG was done using a home-made Word Visual Basic macro. This macro works for Word 97 and 2000 and it is an experimental tool (it is not available for downloading).