SVG.js API & Examples

A listing, and example, of each SVG.js API feature. Animations are included within each feature.
Go To:

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.
Top⇧
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.
Top⇧
SVG.Doc

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

returns SVG.Doc which inherits from SVG.Container
Top⇧
mySVG.nested()

Nest SVG documents within each other.
Top⇧
mySVG.group() - <g> element

Create a group element.

Note: A group has all the same element methods as the root SVG document
Top⇧
mySVG.symbol() - <symbol> element

Symbols are not rendered. A symbol element is used in combination with the use element.

Note: A symbol has all the same element methods as the root SVG document
Top⇧
mySVG.defs() - <defs> element

The <defs> element is not rendered, and is a container for referenced elements.

Note: A defs has all the same element methods as the root SVG document
Top⇧
mySVG.link() - <a> element

Create a hyperlink that will be activated on all child elements.
Note: A link has all the same element methods as the root SVG document
Top⇧
mySVG.rect() - <rect> element

Methods:
element.size(width,height)
element.width(width)
element.height(height)
element.cx(cx)
element.cy(cy)
element.center(cx,cy)
element.radius(rx,ry) - border stroke
Top⇧
mySVG.circle() - <circle> element

Methods:
element.radius(r)
element.cx(cx)
element.cy(cy)
element.center(cx,cy)
Top⇧
mySVG.ellipse() - <ellipse> element

Methods:
element.radius(rx,ry)
element.cx(cx)
element.cy(cy)
element.center(cx,cy)
Top⇧
mySVG.line() - <line> element

Methods:
myLine.plot(value)
value - points string, points array, SVG.array(), SVG.pointArray()
element.array(); returns points string
Top⇧
mySVG.polyline() - <polyline> element

Methods:
element(value)
value - points string, points array, SVG.array(), SVG.pointArray()
element.array(); returns points string
Top⇧
mySVG.polygon() - <polygon> element

Methods:
element(value)
value - points string, points array, SVG.array(), SVG.pointArray()
element.array(); returns points string
Top⇧
mySVG.path() - <path> element

Methods:
path(dValue)
dValue - string, SVG.PathArray()
Top⇧
mySVG.text() - <text> element

Methods:
mySVG.plain(string) - basic text element
mySVG.text(string) - allows '\n' new lines
mySVG.text(function(add){}) - add tspans & newLine
myText.tspan(string) - add a single tspan
myText.build(true) - dynamiclly add content
myText.build(false) - disable add content
myText.clear() - clears all content
myText.length() - Gets the total computed text length of all tspans together
myText.font() - set/get properties: leading, anchor, family, size, stretch, style, variant, weight
myText.lines() - Array(Set) containing all tspans
myText.lines().get(number) - Access numbered tspan
myText.text() - set/get text string and tspans
Top⇧
myTextElement.path() - Run text along a path (<textPath> element)

Methods:
myTextElement.path(dValueString) - builds a textPath element
myTextElement.textPath() - access textPath element
myTextElement.plot(dValue) - Change textPath d string
Top⇧
mySVG.image() - <image> element

Methods:
myImage.load() - Replaces current image
myImage.loaded(function(loader){}) - After image loads
loader
.width, .height, .ratio(width/height), .url
Top⇧
mySVG.gradient() - <gradient> element

Methods:
myGradient.at(offset, color, opacity }) - offset is the stop number
myGradient.fill() - returns the gradient url
myGradient.from(x,y) - define the direction you can set from x, y
myGradient.to(x,y) - define the direction you can set to x, y
myGradient.get(number) - get a stop from an existing gradient
myGradient.radius() - radial gradient method to define the outermost radius
myGradient.update() - gradient can updated after stop change(s)
Top⇧
mySVG.pattern() - <pattern> element

Methods:
mySVG.pattern(width,height, function(add){..add elements..}) - create pattern
myPattern.fill() - returns pattern url
myPattern.update() - updates pattern on change(s)
Top⇧
mySVG.mask() - <mask> element

Methods:
myMask=mySVG.mask()add(element) - create mask element
myElement.maskWith(myMask) - place mask on a element
myElement.unmask() - returns the element's mask
myMask.remove() - remove the mask element
myElement.masker - access methods to change the mask.
Top⇧
mySVG.clipPath() - <clipPath> element

Methods:
myClipPath=mySVG.clip()add(element) - create clipPath element
myElement.clipWith(myClipPath) - place mask on a element
myElement.unclip() - returns the element's mask
myClipPath.remove() - remove the mask element
myElement.clipper - access methods to change the clipPath.
Top⇧
mySVG.use() - <use> element

Top⇧
mySVG.marker() - <marker> element

Methods:
myMarker = mySVG.marker(w,y, function(add){}) - w,h is the viewBox width/height.
marker.ref(x,y) - include refX, refY values
marker.width(x) - defines the markerWidth attribute
marker.height(y) - defines the markerHeight attribute
marker.size(x,y) - defines the markerWidth and markerHeight attributes
marker.update(..add..) - clear() the existing content and add the argument(s)
myElement.reference('marker-start/mid/end') - returns the url of the marker at the element
Top⇧
SVG.get() - Get SVG.js element by id

Top⇧
SVG.select(css) - Return elements with CSS selector

This will search in all svg elements in a document and return them in an instance of SVG.Set
Top⇧
element.select(css) - Get element's children with CSS selector

This will search in all svg elements in a parent and return them in an instance of SVG.Set
Top⇧
SVG.adopt() - Include an existing svg DOM element in SVG.js

Top⇧
element.node - Access DOM properties of SVG.js element

Top⇧
element.node.instance - Access SVG.js properties of the node

Top⇧
element.children() - An array of an element's children

Top⇧
element.clear() - Remove all elements in this parent

Top⇧
element.each() - Iterate over the all children of a parent element

Top⇧
element.first() - Get the first child of a parent element

Top⇧
element.get() - Get a specific child at position(Number) in a parent

Top⇧
element.has() - Check the existence of an element within a parent

Top⇧
element.index() - Returns the index of given element within a parent

Top⇧
element.last() - Get the last child of a parent element

Top⇧
element.doc() - Returns element svg document

Top⇧
element.parent() - Get parent of an element

Top⇧
element.parents() - Get all parents of an element

Top⇧
element.reference() - uri reference of a linked element

myElement.reference(attr) - attr: href, fill, clip-path
Top⇧
element.siblings() - Array of siblings to an element

Note: siblings also includes the element.
Top⇧
element.next() - Get the next sibling to an element

Top⇧
element.position() - Get the position (a number) of an element between its siblings

Top⇧
element.previous() - Get the previous sibling of an element

Top⇧
element.attr() - Get and set an element's attributes

attr(values):
set single attribute - e.g. element.attr("x",100)
set key pair attributes - e.g. element.attr({'stroke-width':2, fill:'red'})
set namespace attribute - e.g. element.attr('x', 50, 'http://www.w3.org/2000/svg')
remove attribute - e.g. element.attr('fill',null)
get attribute - e.g. element.attr('fill')
get all attributes - element.attr()
Top⇧
element.move() - Move the element by its upper left corner to a given x and y position

Top⇧
element.x() - Set/Get the element upper left corner along the x-axis

Top⇧
element.y() - Set/Get the element upper left corner along the y-axis

Top⇧
element.center() - Move the element by its center to a given cx and cy position

Top⇧
element.cx() - Set/Get the element center in the x direction

Top⇧
element.cy() - Set/Get the element center in the y direction

Top⇧
element.dmove() - Shift the element in both the x and y directions relative to its current position

Top⇧
element.dx() - Shift the element in the x direction relative to its current position

Top⇧
element.dy() - Shift the element in the y direction relative to its current position

Top⇧
element.size() - Set the size of an element to a given width and height

Top⇧
element.width() - Set/Get the width of an element

Top⇧
element.height() - Set/Get the height of an element

Top⇧
element.radius() - Used at circles, ellipses, and rects

Top⇧
element.fill() - Set fill value

Top⇧
element.stroke() - Set stroke value

Top⇧
element.opacity() - Set opacity value

Top⇧
element.transform() - Set/Get transform value

Methods:
myEelement.transform.({key:value,relative}) - set relative to true for relative changes
{rotation:angle}
{scale:xyscale}
{scaleX:xscale}
{scaleY:yscale}
{skewX:xangle}
{skewY:yangle}
{x:x}
{y:y}
{a:number} thru {f:number}

Get:
element.transform("key")
Top⇧
element.flip() - Flips element over a given axis

Methods:
element.flip("x") - flip at x-axis @ element center x
element.flip("y") - flip at y-axis @ element center y
element.flip("x", xvalue) - flip at x-axis @ x value
element.flip("y", yvalue) - flip at y-axis @ y value
Top⇧
element.rotate() - Set rotate transform value

Methods:
element.rotate(angle) - default rotates from element center point
element.rotate(angle,x,y) - rotates from point x,y
Top⇧
element.skew() - Set skew transform value

Methods:
element.skew(xangle,yangle) - default skews from element center point
element.skew(xangle,yangle,x,y) - skews from point x,y
Top⇧
element.scale() - Set scale transform value

Methods:
element.scale(scaleXY) - default scales x/y direction from element center point
element.scale(scaleXY,x,y) - scales x/y direction from point x,y
element.scale(scaleX,scaleY,x,y) - scales from point x,y
Top⇧
element.translate() - Set translate transform value

Methods:
element.translate(x,y) - translates x/y direction
Top⇧
element.style() - Set/Get the style of an element

Methods:
element.style('styleAttribute','value') - set a style attribute value
element.style(cssString) - set style with css string
element.style({}) - set style with key:value pairs
element.style(cssString,null) - remove a css style
element.style(cssString) - get a css style value
element.style() - get entire css style string
Top⇧
element.show() - Show element

Removes css display from the element.
Top⇧
element.hide() - Hide element

places css display:none at the element.
Top⇧
element.visible() - Check to determine if the element is visible

Determines the css display value (not css visibility)
Top⇧
element.addClass() - Adds a given css class

Top⇧
element.classes() - Fetches the CSS classes for the element as an array

Top⇧
element.hasClass() - Test the presence of a given css class

Top⇧
element.removeClass() - Removes a given css class

Top⇧
element.toggleClass() - Toggles a given css class

Top⇧
element.data() - Set/Get arbitrary objects, strings and numbers to SVG elements

Methods:
element.data('key', value) - set data value (as JSON)
element.data('key', value,true) - set data value (as is)
element.data('key', { value: { data: my data }}) - set data value
element.data('key') - get data value/object
Top⇧
element.remember() - Set/Get data in-memory at an element

Methods:
Set:
element.remember('key', value/object)
Get:
element.remember('key')
Top⇧
element.forget() - Erasing a memory at element

Methods:
element.forget() - erase all memories
element.forget('key') - erase specific memory segment(s)
Top⇧
element.add() - This parent adds the the argument element

Top⇧
element.addTo() - Sets the calling element as a child node of the argument

Top⇧
element.clone() - To make an exact copy of an element

Top⇧
element.put() - Sets the calling element as the parent node of the argument

Top⇧
element.putIn() - Sets the calling element as a child node of the argument

Top⇧
element.remove() - Removes the calling element from the svg document

Top⇧
element.replace() - Replace the calling element with the element passed to the method

Top⇧
element.toDoc() - Place the element into its SVG root-node

Top⇧
element.toParent() - Moves an element to a different parent

Top⇧
element.ungroup() - Ungroup all elements in this group into the given parent

Top⇧
element.after() - Insert an element after another

Top⇧
element.before() - Insert an element before another

Top⇧
element.back() - Move element to the back

Top⇧
element.backward() - Move element one step backward

Top⇧
element.front() - Move element to the front

Top⇧
element.forward() - Move element one step forward

Top⇧
element.point() - Transform point from screen coordinates to element's coordinate system

Top⇧
element.inside() - Check if a given point is inside the bounding box of an element

Top⇧
element.bbox() - Get the bounding box of an element

Returns:
width (value from native getBBox)
height (value from native getBBox)
w (shorthand for width)
h (shorthand for height)
x (value from native getBBox)
y (value from native getBBox)
cx (center x of the bounding box)
cy (center y of the bounding box)
x2 (lower right x of the bounding box)
y2 (lower right y of the bounding box)
Top⇧
mySVG.viewBox() - Set/Get mySVG viewBox

Methods:
Set:
element.viewBox(myX, myY, myWidth, myHeight)
Set:
element.viewBox({x:myX, y:myY, width:myWidth, height:myHeight})
Get:
mySVG.viewBox()
Returns: x, y, width, height
mySVG.viewBox().zoom() - returns zoom of the viewbox
Top⇧
element.rbox() - Get transformed element bounding box

Returns:
width (the actual visual width)
height (the actual visual height)
w (shorthand for width)
h (shorthand for height)
x (the actual visual position on the x-axis)
y (the actual visual position on the y-axis)
cx (center x of the bounding box)
cy (center y of the bounding box)
x2 (lower right x of the bounding box)
y2 (lower right y of the bounding box)
Top⇧
element.animate() - Animate an element

Methods:
animElement = element.animate(duration, easing, delay)
easing - "<>": ease in and out (default)
easing - ">": ease out
easing - "<": ease in
easing - "-": linear
easing - custom function
animElement .attr({...}) - basic animation: attribute value(s)
animElement.method() - fill(), stroke(), opacity(), move(), dmove(), dx(), dy(), size(), width(), height(), radius(), center(), cx(), cy(), x(), y(), transform(), translate(), rotate(), scale(), skew(), plot(), from(), to().
Top⇧
animElement.fx.target() - Returns the element the animation is applied to

element=animElement.fx.target()
Top⇧
animElement.fx.situation - Returns the animation's current situation as an object

situationObj=animElement.fx.situation

getters: situationObj
.startstart time as a number in milliseconds
.playanimation playing or not; true or false
.pausetime when the animation was last paused
.durationthe chosen duration of the animation
.easethe chosen easing calculation
.finishstart + duration
.loopthe current loop; counting down if a number; true, false or a number
.loopsif a number, the total number loops; true, false or a number
.reversedwhether or not the animation should run backwards
.reversingtrue if the loop is currently reversing, otherwise false
Top⇧
animElement.finish() - Finish animation chain

This method finishes the whole animation chain. All values are set to their corresponding end values and every situation gets fullfilled
Top⇧
animElement.pause() - Pause the animation

Top⇧
animElement.play() - Continue the paused animation

Top⇧
animElement.reverse() - Toggle the direction of the animation

Top⇧
animElement.stop() - Stop an animation

Top⇧
animElement.at() - Access animation with an external event

Top⇧
animElement.delay() - Set a delay in ms before the animation is run

Top⇧
animElement.loop() - Run continuous or a predefined number of times

Methods:
animElement.loop(2) - runs 2 times
animElement.loop(true) - runs continuously
animElement.loop(true,true) - runs continuously, returns to original value(s)
Top⇧
animElement.once() - Call a custom function at a defined time or position

Methods:
Top⇧
animElement.queue() - Call a custom function between two chained animations

Top⇧
animElement.after() - Define a function to occur following animation completion

Top⇧
animElement.afterAll() - Define a function to occur following animation chain completion

Top⇧
animElement.during() - Define a function to occur during the animation

Methods:
animElement.during(function(pos, morph, eased, situation){}) )
Arguments:
pos - 0 thru 1
morph - function: morph(from,to)
eased - easing output value
situation - Object
Top⇧
animElement.duringAll() - Define a function to occur during all chained animations

Methods:
animElement.duringAll(function(pos, morph, eased, situation){}) )
Arguments:
pos - 0 thru 1
morph - function: morph(from,to)
eased - easing output value
situation - Object
Top⇧
element.eventMouse() - Mouse events: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove, touchstart, touchmove, touchleave, touchend and touchcancel

Top⇧
element.fire() - Fire an event

Top⇧
element.event() - Return the requested fire event

Top⇧
element.on() - Create custom event

Top⇧
element.off() - Unbind events and listeners

Top⇧
SVG.on() - Add event listener to any document element

Top⇧
SVG.off() - Remove event listener from any document element

Top⇧
SVG.pointArray() - Array of x,y paired values

Used for polyline and polygon elements
Top⇧
SVG.pathArray() - Array representing every segment in a path string

Path arrays carry arrays representing every segment in a path string.
Top⇧
new SVG.Color() - Methods for animating/morhing different types of colors

Accepted values are:
hex string - three based (e.g. #f06) or six based (e.g. #ff0066) new SVG.Color('#f06')
rgb string - e.g. rgb(255, 0, 102) new SVG.Color('rgb(255, 0, 102)')
rgb object - e.g. { r: 255, g: 0, b: 102 } new SVG.Color({ r: 255, g: 0, b: 102 })
Methods:
brightness() - Get the brightness of a color
morph() - Make a color morphable
at() - Get morphable color at given position
toHex() - Get hex value
toRgb() - Get rgb string value
Top⇧
SVG.Matrix() - Create a dynamic SVG Matrix

Methods:
myMatrix = new SVG.Matrix, returns:matrix(1,0,0,1,0,0)
myMatrix = new SVG.Matrix(a,b,c,d,e,f) arguments (a-f):numbers
myMatrix = new SVG.Matrix({ a:number, b:number, c:number, d:number, e:number, f:number })
myMatrix.around() - Performs a given matrix transformation around a given center point
myMatrix.at() - This method will morph the matrix to a given position between 0 and 1
myMatrix.clone() - Returns an exact copy of the matrix
myMatrix.extract() - Gets the calculated values of the matrix as an object
myMatrix.flip(x/y,position) -
myMatrix.inverse() - Creates an inverted matix
myMatrix.morph() -
myMatrix.multiply() -
myMatrix.native()
myMatrix.rotate()
myMatrix.scale()
myMatrix.skew()
myMatrix.translate()
myMatrix.toString()
Top⇧
SVG.Number() - Create/Modify number strings

Methods:
plus() - Addition
minus() - Subtraction
times() - Multiplication
morph() - Make a number morphable
at() - Get morphable number at given position
to() - Change number to another unit
Top⇧
mySVG.set() - Create a set to modify or animate multiple elements

Methods:
add() - Add an element to a set
animate() - Animate the set
bbox() - Get the bounding box of all elements in the set
clear() - Remove all elements from a set
each() - Iterate over all members in a set
first() - Gets the first element in a set
get() - Gets the element at a given index
has() - Determine if an element is member of the set
index() - Returns the index of a given element in the set
last() - Gets the last element in the set
remove() - Remove an element from a set
Top⇧
element.svg() - Set/Get element svg string

Top⇧
SVG.invent() - Create custom SVG elements

Accepted Values:
create - Can be either a string with the node name or a custom initializer function.
inherit - The desired SVG.js class to inherit from (e.g. SVG.Shape, SVG.Element, SVG.Container, SVG.Rect, ...).
extend - An object with the methods that should be applied to the element's prototype.
construct - An object with the methods to create the element on the parent element
parent - (optional) An SVG.js parent class on which the methods in the passed
Top⇧
SVG.extend() - Specify custom methods to various element types

Top⇧