The lightweight library for manipulating and animating SVG.
Why choose SVG.js?
SVG.js has no dependencies and aims to be as small as possible while providing close to complete coverage of the SVG spec. If you're not convinced yet, here are a few highlights.
SVG.js is lightweight. Numbers don't lie, so here is how it compares to the competition:
Less is better.
Keep in mind it does the same thing, with nearly half the amount of code!
SVG.js is fast. Obviously not as fast as vanilla js, but many times faster than the competition:
generate 10000 rects
generate 10000 rects with fill color
generate 10000 rects with gradient fill
Less is better. Tested on an Intel Core m5 @ 1.2GHz.
Easy readable, uncluttered syntax.
SVG.js provides a syntax that is concise and easy to read. Doing the same as the vanilla js example above:
// SVG.js var draw = SVG('drawing') , rect = draw.rect(100, 100).fill('#f06')
That's just two lines of code instead of ten! And a whole lot less repetition.
Go crazy with animations
There is 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.js is licensed under the terms of the MIT License.
Wondering what has changed in the latest releases? Have a look at the change log.