Snap.svg README

The project's README from github.com/adobe-webplatform/Snap.svg. As one markdown file: README.md.

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

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

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.

Searching Database…

14K ·GitHub

What is this?

Snap.svg is a JavaScript library for creating and animating modern SVG graphics in the browser.

Is it a framework or a library?

It's a library you load in your page or bundle with your app; it depends on the small 'eve' event library.

How do I add it to a project?

Install with Bower (bower install snap.svg) or npm (npm install snapsvg), or grab the minified/unminified files manually from the dist folder, then just load the script in your HTML - no other scripts needed.

Do I need webpack or any build tool to use it?

No, you can just load the script directly in HTML; webpack is only needed if you want to bundle it, in which case you also need the Imports Loader package.

Where does Snap.svg run?

It runs in any modern web browser that supports SVG, since it's a client-side JavaScript library.

What can I learn more about Snap.svg from?

The project points to snapsvg.io for a Getting Started guide, an API Reference, and a Slack room for community help.

Why would I use Snap.svg instead of raw SVG manipulation?

It provides a higher-level JavaScript API for creating, animating and manipulating SVG elements, saving you from writing verbose raw DOM/SVG code by hand.

What are similar projects?

lottie-web, mojs, raphael, zdog, lenis, d3, plotly.js, twemoji

Which topics is it in?

snap, svg, graphics, javascript-library, animation, frontend, apache-2.0, library, javascript, web, open-source

Creator: adobe-webplatform
Size: 3.7 MB
Stars: 14K
Updated: CommitMar 13
Age: 13y
Commits · 90 Days