creative coding svg
Branch: master
Clone or download


A simple creative coding Javascript library to make SVG interactive and a little bit more accessible


Include svg.js in your project.

<script src="svg.js"></script>


Read this introduction blog post and check out the examples/ folder included in this project for more demos:

The following code draws the Japanese flag:

let flag = SVG.Image(600, 400);
let rect = SVG.rect(0, 0, flag.width, flag.height);
let circle =, flag.height/2, flag.height*0.3);

rect.setAttribute("fill", "white");
circle.setAttribute("fill", "#BC002D");



create an SVG. create a group (a container, like layers in Photoshop)

svg(className, id, parent)
group(className, id, parent)

save or load an SVG

save(svg, filename = "image.svg")
load(input, callback)

geometry primitives

line(x1, y1, x2, y2, className, id, parent)
circle(x, y, radius, className, id, parent)
rect(x, y, width, height, className, id, parent)
polygon(pointsArray, className, id, parent)
polyline(pointsArray, className, id, parent)
bezier(fromX, fromY, c1X, c1Y, c2X, c2Y, toX, toY, className, id, parent)
text(textString, x, y, className, id, parent)
wedge(x, y, radius, startAngle, endAngle, className, id, parent)
arc(x, y, radius, startAngle, endAngle, className, id, parent)
curve(fromX, fromY, midX, midY, toX, toY, className, id)
regularPolygon(cX, cY, radius, sides, className, id, parent)

update geometry for polygon/polyline or arc/wedge

setPoints(polygon, pointsArray)
setArc(shape, x, y, radius, startAngle, endAngle, includeCenter = false)

class/id convenience methods

addClass(xmlNode, newClass)
removeClass(xmlNode, newClass)
setId(xmlNode, newID)

clear the contents of an SVG or a group


setDefaultViewBox matches viewBox to visible dimensions. getViewBox returns an array of 4 numbers

setViewBox(svg, x, y, width, height, padding = 0)

these alter the viewBox. no CSS transforms here.

scale(svg, scale, origin_x = 0, origin_y = 0)
translate(svg, dx, dy)


the Image() object

One Image() instance gives you an SVG with a bunch of convenience methods and event handlers. Optional initializers are

  • 2 numbers: width then height
  • string ID name, or DOM pointer to the parent element to append this SVG. otherwise the SVG will be appended to the body.
let sketch = SVG.Image(640, 480, "parent-element");

many of the methods are copied from greater SVG namespace, but often with fewer arguments as its implied that operations are performed on this SVG.

load(data, callback)

get or set the visible dimensions. not the viewBox


removeChildren can accept an optional group argument, otherwise it removes all children from this SVG.

setViewBox(x, y, width, height)

a pointer to the actual DOM level SVG object


event handlers

myImage.onMouseMove = function(mouse) { }
myImage.onMouseDown = function(mouse) { }
myImage.onMouseUp = function(mouse) { }
myImage.onMouseLeave = function(mouse) { }
myImage.onMouseEnter = function(mouse) { }
myImage.animate = function(event) { }

all the mouse handlers provide this object

  isPressed: false, // is the mouse button pressed (y/n)
  position: [0,0],  // the current position of the mouse [x,y]
  pressed: [0,0],   // the last location the mouse was pressed
  drag: [0,0],      // vector, displacement from start to now
  prev: [0,0],      // on mouseMoved, the previous location
  x: 0,             //
  y: 0              // -- x and y, these are the same as position

and the animate handler provides elapsed seconds (float) and frame number (integer)

  time: 0.0
  frame: 0