SVG.js

Parents

SVG.Parent

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

SVG.Container

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.


SVG.Doc

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

SVG() constructor

returns SVG.Doc which inherits from SVG.Container

var draw = SVG('drawing')



Note: The first time SVG() is called, a second, invisible <svg> will be created. This is our parser as explained in the FAQ.


SVG.Nested

Nest SVG documents within each other.

nested() constructor

constructor on SVG.Container
returns SVG.Nested which inherits from SVG.Container

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)


SVG.G

Grouping elements can be 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.

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.

group() constructor

constructor on SVG.Container
returns SVG.G which inherits from SVG.Container

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)


SVG.Symbol

constructor on SVG.Container
returns SVG.Symbol which inherits from SVG.Container

Not unlike the group element, the symbol element is a container element. The only difference between symbols and groups is that symbols are not rendered. Therefore a symbol element is ideal in combination with the use element:

var symbol = draw.symbol()
symbol.rect(100, 100).fill('#f09')

var use  = draw.use(symbol).move(200, 200)


SVG.Defs

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

defs() constructor

constructor on SVG.Container
returns SVG.Defs which inherits from SVG.Container

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.


SVG.A

Create a hyperlink that will be activated on all child elements.

constructor on SVG.Container
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