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

Download

Manipulating and Animating SVG With SVG.js

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.

 

You Might Be Interested In:

Tags: