Snap.svg ·

A JavaScript SVG library for the modern web. Learn more at snapsvg.io.

Follow us on Twitter.

Install

• Bower - bower install snap.svg
• npm - npm install snapsvg
• Manual Minified - https://github.com/adobe-webplatform/Snap.svg/raw/master/dist/snap.svg-min.js
• Manual Unminified - https://raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg.js

Learn

• About Snap.svg
• Getting Started
• API Reference
• Slack Room. Invite

Use

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.

To load with webpack use following command:

const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);

Build

Snap.svg uses Grunt to build.

• Open the terminal from the Snap.svg directory:

  cd Snap.svg

• Install its command line interface (CLI) globally:

  npm install -g grunt-cli

  *You might need to use sudo npm, depending on your configuration.

• Install dependencies with npm:

  npm install

  *Snap.svg uses Grunt 0.4.0. You might want to read more on their website if you haven’t upgraded since a lot has changed.

• To build the files run

  grunt

• The results will be built into the dist folder.
• Alternatively type grunt watch to have the build run automatically when you make changes to source files.

Testing

Tests are located in test folder. To run tests, simply open test.html in there. Automatic tests use PhantomJS to scrap this file, so you can use it as a reference.

Alternatively, install PhantomJS and run command

grunt test

Contribute

• Fill out the CLA.
• Fork the repo.
• Create a branch:

  git checkout -b my_branch

• Add your changes.
• Check that tests are passing
• Commit your changes:

  git commit -am "Added some awesome stuff"

• Push your branch:

  git push origin my_branch

• Make a pull request to dev(!) branch.

Note: Pull requests to other branches than dev or without filled CLA wouldn’t be accepted.

0.5.1

• Bug fix

0.5.0

• Added color palettes for Material and FlatUI
• Added methods for gradients: Element.stops(), Element.addStop(), Element.setStops()
• Fixed matrix splitting for better animation of matrices`
• Various bug fixes
• Better integration of tests and ESlint

0.4.1

• Bug fixes.

0.4.0

• Moved class and element related code into separate plugins
• Added Element.align() and Element.getAlign() methods
• Added animation support for viewBox
• Added support for <symbol>
• Added method Paper.toDataURL()
• Added method Snap.closest()
• Added methods to work with degrees instead of radians: Snap.sin(), Snap.cos(), Snap.tan(), Snap.asin(), Snap.acos(), Snap.atan() and Snap.atan2()
• Added methods Snap.len(), Snap.len2() and Snap.closestPoint()
• Added methods Element.children() and Element.toJSON()
• Various bug fixes

0.3.0

• Added .addClass(), .removeClass(), .toggleClass() and .hasClass() APIs
• Added Paper.mask(), Paper.ptrn(), Paper.use(), Paper.svg()
• Mask & pattern elements are sharing paper methods (just like group)
• Added Set.bind() method
• Added syncronisation for Set.animate()
• Added opacity to the shadow filter
• Added ability to specify attributes as "+=10" or "-=1em" or "*=2"
• Fix negative scale
• Fix for path2curve
• Fixed shared <defs> issue
• Various bug fixes

0.2.0

• Added support for text path
• Added getBBox method to the paper object
• Added Element.appendTo() and Element.prependTo()
• Added getElementByPoint()
• Added Set.remove() method
• Get rid of internal SVG parser in favor of the browser
• Fix for xlink:href setting for images
• Fix Element.animate()
• Fix for animate and stroke-dashoffset
• Absolute transforms fix
• Fix for animation of SVG transformations, matrices and polygon points
• Various bug fixes

0.1.0

• Initial release