Parents

The SVG.Parent prototype is the base wrapper for all elements that can contain other elements. SVG.Parent inherits directly from the lowest level of all SVG.js prototypes: SVG.Element.

SVG.Container adds another level to the parent inheritance stack. Where SVG.Parent brings some low level methods like add(), remove() and has() to name a few, SVG.Container can and should be used if you want to add your own methods. That way the SVG.Parent prototype remains clean. Therefore you should always inherit from SVG.Container when implementing your own parent elements.

The parent inheritance stack is: SVG.Element > SVG.Parent > SVG.Container.


Main svg document

returns SVG.Doc which inherits from SVG.Container

The main SVG.js initializer function creates a root svg node in the given element and returns an instance of SVG.Doc:

var draw = SVG('drawing')


Groups

returns SVG.G which inherits from SVG.Container

Grouping elements is useful if you want to transform a set of elements as if it were one. All element within a group maintain their position relative to the group they belong to. A group has all the same element methods as the root svg document:

var group = draw.group()
group.path('M10,20L30,40')

Existing elements from the svg document can also be added to a group:

group.add(rect)

Note: Groups do not have a geometry of their own, it's inherited from their content. Therefore groups do not listen to x, y, width and height attributes. If that is what you are looking for, use a nested() svg instead.


Nested svg

returns SVG.Nested which inherits from SVG.Container

With this feature you can nest svg documents within each other. Nested svg documents have exactly the same features as the main, top-level svg document:

var nested = draw.nested()

var rect = nested.rect(200, 200)


Defs

returns SVG.Defs which inherits from SVG.Container

The <defs> element is a container element for referenced elements. Elements that are descendants of a ‘defs’ are not rendered directly. The <defs> node lives in the main <svg> document and can be accessed with the defs() method:

var defs = draw.defs()

The defs are also available on any other element through the doc() method:

var defs = rect.doc().defs()

The defs node works exactly the same as groups.


Hyperlink

returns SVG.A which inherits from SVG.Container

A hyperlink or <a> tag creates a container that enables a link on all children:

var link = draw.link('http://svgdotjs.github.io/')
var rect = link.rect(100, 100)

The link url can be updated with the to() method:

link.to('http://apple.com')

Furthermore, the link element has a show() method to create the xlink:show attribute:

link.show('replace')

And the target() method to create the target attribute:

link.target('_blank')

Elements can also be linked the other way around with the linkTo() method:

rect.linkTo('http://svgdotjs.github.io/')

Alternatively a block can be passed instead of a url for more options on the link element:

rect.linkTo(function(link) {
  link.to('http://svgdotjs.github.io/').target('_blank')
})
Fork me on GitHub