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.

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:

const Snap = require("snapsvg/dist/snap.svg.slim.js"); // or define an alias in webpack.config.js

or

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

Snap.svg uses Grunt to build.

• Open the terminal from the Snap.svg directory:

cd Snap.svg

• 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.
• If there are eslint errors that make the build fail, you can run $ node eslintFixCoreScript.js to correct these errors or use $ grunt --force to ignore them and finish the build process.

Repository index

• demos/ - examples of what Snap.svg can do and how to do it.
• dist/snap.svg-min.js - latest version of minified Snap.svg library file.
• dist/snap.svg.js - latest version of Snap.svg library file.
• doc/ - contains reference.html generated from template.dot in the root directory using the Dr. JS tool (which uses the dr.json file, and it contains these directories too: css, fonts, img, js. with assets also used in the full website of Snap.svg: www.snapsvg.io.
• src/ contains all the source JS files needed to build the final library file.
• test/ contains all unit tests.
• .gitignore - used by Git.
• .gitmodules - used by Git.
• .travis.yml - used by GitHub to connect the repository to Travis CI service.
• CONTRIBUTING, LICENSE, NOTICE and README.md (this file) are offering you information about the other files and about the project.
• Gruntfile.js - Grunt JavaScript Task Runner configuration file for the entire project.
• bower.json, component.json and package.json are configuration files for different package managers.
• dr.json - dr.js configuration file.
• eslintFixCoreScript.js - a script that uses the required eslint npm module to automatically fix the errors that are reported by the eslint task, that is defined in Gruntfile.js, before Grunt quits.
• history.md - changelog file in Markdown format.
• template.dot - HTML file used as a template for the generated doc/reference.html file.

Testing

Tests are located in test folder. To run tests, simply open test/index.html. 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.