Scalable Vector Graphics (SVG) is a language developed by the World Wide Web Consortium for describing two dimensional vector graphics for storage and distribution on the Web. Unlike raster image formats, SVG-based images scale nicely to arbitrary resolutions and sizes. We introduce a constraint extension to SVG called Constraint Scalable Vector Graphics (CSVG) that permits a description of an image that is more flexible. With CSVG, an image can contain objects whose positions and other properties are linearly related to other attributes via constraints. For example, a rectangle can be specified to remain above a circle, and a line can be constrained to connect their centers. The various constraints each have a specified strength, and we use constraint hierarchy theory to determine an appropriate solution. CSVG enables better layouts of diagrams for a wider variety of viewing conditions and provides support for declaratively specified animation. We embedded our Cassowary constraint solving toolkit in an existing SVG renderer to produce a prototype implementation of a CSVG system.
Our prototype implementation of a CSVG viewer is based upon the CSIRO SVG toolkit. It is written entirely in Java and depends on the following packages:
The following is an archive of a recent snapshot from our CVS repository.
You will need to compile all of the java source files, be sure that the jcsvg directory and libraries from above are in your CLASSPATH, and run:
java org.csiro.svgv.display.Viewer filename.csvg
The viewer will run. You may then view samples files from the included samples directory. Here are some sample files that show some of the features of CSVG. It may be necessary to place the csvg.dtd file in the same directory as the samples to view them properly.
Here is the paper that introduced CSVG (submitted to UIST 2000):