The library classes are divided into packages, most of which are named after their related sections in the W3C standard.

The following packages exist:

• Behavior — high level functions (such as making elements draggable)
• Coords — coordinate system and transformations
• Core — core library classes
• Embed — widgets that wrap an svg graphic
• Paint — filling, stroking, and patterns
• Path — the path element
• Shape — basic shapes
• Struct — structural elements
• Text — adding text to your graphic

You can include an SVG graphic into your application just like you would include any other widget. All you need to do is add the svg.embed.Svg widget to whatever widget container you need.

var win = new qx.ui.window.Window();
win.setLayout(new qx.ui.layout.Grow());
var svgWidget = new svg.embed.Svg();
win.add(svgWidget);

The code above will insert an svg root element into your document, which will look something like this:

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width: 278px;
     height: 253px;" />

You can use the getSvg method of the widget to obtain this root element. This will return an instance of svg.struct.Svg.

var svgRoot = svgWidget.getSvg();

The various SVG elements are each represented by a corresponding class in the library. For example, the <svg> element is represented by svg.struct.Svg, and the <rect> element is represented by svg.shape.Rect.

Every element class extends svg.core.Element, which in turn extends from qx.html.Element. This means that you can use the standard HTML DOM manipulation features of qooxdoo to manipulate the SVG DOM too.

With this knowledge, it's easy to nest elements together:

var svgRoot = svgWidget.getSvg();
var group = new svg.struct.Group();
var rect = new svg.shape.Rect();
svgRoot.add(group);
group.add(rect);

The difference between svg.core.Element and qx.html.Element is that elements created with svg.core.Element are created in the correct SVG namespace. This is required by browsers when you mix SVG with XHTML.