Popularity
8.5
Stable
Activity
1.8
Stable
13,932
402
1,145

Description

SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.

Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera)

Monthly Downloads: 0
Programming language: JavaScript
License: Apache License 2.0
Tags: Data Visualization     SVG     Visualization     Vector     Canvas    
Latest version: v0.5.1

Snap.svg alternatives and similar libraries

Based on the "Data Visualization" category.
Alternatively, view Snap.svg alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of Snap.svg or a related project?

Add another 'Data Visualization' Library

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: sh 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: sh git checkout -b my_branch
  • Add your changes.
  • Check that tests are passing
  • Commit your changes: sh git commit -am "Added some awesome stuff"
  • Push your branch: sh 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.


*Note that all licence references and agreements mentioned in the Snap.svg README section above are relevant to that project's source code only.