Why SVG (and Snap)?
Modern features for modern browsers
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
Inject life into your SVG
With a rich animation library and easy event handing, Snap.svg lets you bring your SVG to life.
Of course you can generate SVG with Snap, but you can also use Snap to work with SVG generated from tools like Adobe Illustrator, Inkscape, or Sketch. You can even load strings of SVG asynchronously and query out the pieces you need in order to turn SVG files into sprite sheets.
Open-source and free
Snap.svg is available under an Apache 2 license which means it’s completely open-source, and completely free.
In your HTML file, load simply by: <script src="snap.svg-min.js"></script> No other scripts are needed. Both the minified and uncompressed (for development) versions are in the /dist folder.
Example to create our drawing surface:
// First lets create our drawing surface out of existing SVG element // If you want to create new surface just provide dimensions // like s = Snap(800, 600); var s = Snap("#svg"); // Lets create big circle in the middle: var bigCircle = s.circle(150, 150, 100);
More docs at: http://snapsvg.io/docs/