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.
Features:
- 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
Usage:
// 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)
text.font({
family: 'Source Sans Pro'
, size: 180
, anchor: 'middle'
, leading: '1em'
})
// clip image with text
image.clipWith(text)The code above is the the exact same code used to create the masked header at the top of this page.
