By id

SVG.get()

returns SVG.Element (or the most relevant subclass of SVG.Element)

If you want to get an element created by SVG.js by its id, you can use the SVG.get() method:

var element = SVG.get('my_element')

element.fill('#f06')

Using CSS selectors

SVG.select()

returns SVG.Set

This will search in all svg elements in a document and return them in an instance of SVG.Set:

var elements = SVG.select('rect.my-class').fill('#f06')

Additionally, a second argument can be passed to define the parent element to search in:

var elements = SVG.select('rect.my-class', group).fill('#f06')

element.select()

returns SVG.Set

Similar to SVG.select(), elements van be selected within a child element as well:

var elements = group.select('rect.my-class').fill('#f06')

This method is available on all parent classes inheriting from SVG.Parent.

Existing DOM elements

SVG.adopt()

returns SVG.Element

If you want SVG.js to adopt an existing DOM element, you can use the SVG.adopt() method:

var polygon = document.createElement('polygon')

var element = SVG.adopt(polygon)

element.fill('#f06')

Using jQuery or Zepto

Another way is to use jQuery or Zepto. Here is an example:

// add elements
var draw   = SVG('drawing')
var group  = draw.group().addClass('my-group')
var rect   = group.rect(100,100).addClass('my-element')
var circle = group.circle(100).addClass('my-element').move(100, 100)

// get elements in group
var elements = $('#drawing g.my-group .my-element').each(function() {
  this.instance.animate().fill('#f09')
})

Circular reference

Every element instance within SVG.js has a reference to the actual node.

node

returns SVGElement

element.node

native()

returns SVGElement

element.node

instance

returns SVG.Element

Similarly, the node carries a reference to the SVG.js instance:

node.instance

Note the difference in return values.
The node references a native SVGElement while instance references the SVG.Element instance.

Child references

children()

returns array

An array of all children can be retrieved with the children method:

draw.children()

clear()

returns itself

To remove all elements from a parent element:

draw.clear()

each()

returns itself

The each() allows you to iterate over the all children of a parent element:

draw.each(function(i, children) {
  this.fill({ color: '#f06' })
})

Deep traversing is also possible by passing true as the second argument:

// draw.each(block, deep)
draw.each(function(i, children) {
  this.fill({ color: '#f06' })
}, true)

Note: this refers to the current child element.

first()

returns SVG.Element

To get the first child of a parent element:

draw.first()

get()

returns SVG.Element

Get an element on a given position in the children array:

var rect   = draw.rect(20, 30)
var circle = draw.circle(50)

draw.get(0) //-> returns rect
draw.get(1) //-> returns circle

has()

returns boolean

Checking the existence of an element within a parent:

var rect  = draw.rect(100, 50)
var group = draw.group()

draw.has(rect)  //-> returns true
group.has(rect) //-> returns false

index()

returns number

Returns the index of given element and returns -1 when it is not a child:

var rect  = draw.rect(100, 50)
var group = draw.group()

draw.index(rect)  //-> returns 0
group.index(rect) //-> returns -1

last()

returns SVG.Element

To get the last child of a parent element:

draw.last()

Parent references

Every element has a reference to its parent with the parent() method:

doc()

returns SVG.Doc

For retrieving the root SVG you can use doc()

var draw = SVG('drawing')
var rect = draw.rect(100, 100)

rect.doc() //-> returns draw

parent() within the svg document

returns SVG.Element

element.parent()

Alternatively a class or css selector can be passed as the first argument:

var draw   = SVG('drawing')
var nested = draw.nested().addClass('test')
var group  = nested.group()
var rect   = group.rect(100, 100)

rect.parent()           //-> returns group
rect.parent(SVG.Doc)    //-> returns draw
rect.parent(SVG.Nested) //-> returns nested
rect.parent(SVG.G)      //-> returns group
rect.parent('.test')    //-> returns nested

parent() on the topmost svg document

returns HTMLNode

var draw = SVG('drawing')

draw.parent() //-> returns the wrappig html element with id 'drawing'

parents()

returns array

To get all ancestors of the element filtered by type or CSS selector (see parent() method)

var group1 = draw.group().addClass('test')
  , group2 = group1.group()
  , rect   = group2.rect(100,100)

rect.parents()        // returns [group1, group2, draw]
rect.parents('.test') // returns [group1]
rect.parents(SVG.G)   // returns [group1, group2]

URI references

In cases where an element is linked to another element through an attribute, the linked element instance can be fetched with the reference() method.

reference()

returns SVG.Element

The only thing required is the attribute name:

use.reference('href') //-> returns used element instance
// or
rect.reference('fill') //-> returns gradient or pattern instance for example
// or
circle.reference('clip-path') //-> returns clip instance