snapsvg

The JavaScript library for modern SVG graphics.

Showing:

Popularity

Downloads/wk

63K

GitHub Stars

13.3K

Maintenance

Last Commit

3mos ago

Contributors

36

Package

Dependencies

1

Size (min+gzip)

28.5KB

License

Apache-2.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Snap.svg · Build Status CDNJS GitHub Tag License

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

Follow us on Twitter.

Install

Learn

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.

webpack

To load with webpack 2.x and 3.x, install Imports Loader (npm i -D imports-loader), and add the following to your webpack config:

module: {
  rules: [
    {
      test: require.resolve('snapsvg/dist/snap.svg.js'),
      use: 'imports-loader?this=>window,fix=>module.exports=0',
    },
  ],
},
resolve: {
  alias: {
    snapsvg: 'snapsvg/dist/snap.svg.js',
  },
},

Then, in any module you’d like to require Snap, use:

import Snap from 'snapsvg';

Build

Build Status

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

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

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Nikolay KolevIrvine, CA, US75 Ratings0 Reviews
Full-Stack Cloud Architect
24 days ago
rafal szulczewskilondon, uk8 Ratings0 Reviews
fool - licence expired - turned outlaw - under the radar - industrial espionage - running with the wolves - illicit digital activities - possessed with fire
5 months ago
Peter KissBudapest37 Ratings2 Reviews
An enthusiastic developer. 🚴
October 14, 2020

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial