SVG with JavaScript – svg.js and others

Create and process SVG with JavaScript…

SVG.js – the lightweight library for manipulating and animating SVG

Why it’s a good stuff? SVG.js has no dependencies and aims to be as small as possible while providing close to complete coverage of the SVG spec. SVG.js is lightweight and fast. Easy readable, uncluttered syntax. SVG.js provides a syntax that is concise and easy to read.

There is much more…

– 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

– dynamic gradients and patterns

– fully documented (you’re looking at it 🙂

Svg JavaScript
Svg JavaScript

Easy to use

var draw = SVG('drawing')
  , rect = draw.rect(100, 100).fill('#f06')

License: MIT



See also

Article: Using Javascript with SVG

Snap.svg – The JavaScript SVG library for the modern web


Vector Graphics JavaScript Library – Raphaël

Tutorial: A nice reading progress indicator

JavaScript responsive progress bar solution

Responsive charts jQuery plugin – Pizza JS

JavaScript physics animations library – dynamics.js