Manipulating and Animating SVG With SVG.js

SVG.js is a lightweight javascript library for manipulating and animating SVG. With svg.js you have all the power of vector graphics at pocket size. The whole library is about 9k gzipped.

Document & Examples


Manipulating and Animating SVG With SVG.js


  • easy readable uncluttered syntax
  • very small, about 9k gzipped
  • animations on size, position, transformations, color, …
  • painless extension thanks to the modular structure
  • various useful plugins available
  • unified api between shape types with move, size, center, …
  • binding events to elements
  • full support for opacity masks and clipping paths
  • text paths, even animated
  • element groups and sets
  • dynamic gradients
  • fully documented


// create svg drawing paper
var draw = SVG('canvas')
// create image
var image = draw.image('images/shade.jpg')
image.size(600, 600).y(-150)
// create text
var text = draw.text('SVG.JS').move(300, 0)
  family: 'Source Sans Pro'
, size: 180
, anchor: 'middle'
, leading: '1em'
// clip image with text

The code above is the the exact same code used to create the masked header at the top of this page.


Leave a Reply

Don’t miss out on the latest freebies!

Sign up for my newsletter to receive the latest freebies from the design world. No spam, we promise!