SourceForge.net Logo

SVG Component Example

You should see a gray box below that measures 500 pixels wide, and 300 pixels tall. If you do not see it you will need to verify that your browser can render SVG content. If you use Firefox (or Mozilla), be sure that you are using version 1.5 or greater. If you are running Internet Explorer 6 (and presumably 7), you will need to download and install the SVG Viewer plug-in from Adobe.

[example will be displayed here once JavaScript has been loaded]

The example consists of a light-gray box, measuring 500x300 pixels with a black border. On top of this is drawn nine wide rectangles, each showing off some bit of functionality. The first three show a transition between two colors. The second set of three show a transition in opacity, when the gray background can be seen through the rectangle at one end. The last three show a solid background followed by two more gradients but at different angles from the other sets. The bottom section consists of circles, ovals, and paths. Some using gradients, some with varying opacity, some with wide strokes, and others with narrow. This example shows off most of the functionality build into the first release of the SVG components.