adobe-webplatform / snap.svg

The JavaScript library for modern SVG graphics.

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:

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.

snap.svg's Issues

mina.getById throws error: anim is not defined

Looks like the code should be:
return animations[id] || null;

instead of:
return animations[anim.id] || null;

Test:
https://github.com/adobe-webplatform/savage/blob/b04c154dfeb32f6c4534ba2136115455c56933e4/test/mina.js#L43

Element.getBBox() not functioning

Test throws error: ReferenceError: unit2px is not defined

Test:
https://github.com/adobe-webplatform/savage/blob/eea4f89d29c5df1fa53f721022a878bb2ca3d9bb/test/element.js#L178

IE 10 - Animated game: dice doesn't animate

works fine on chrome though

Element.unhover does not appear to remove events

See test:
https://github.com/adobe-webplatform/savage/blob/fd8db10bd352f804917fe7de0715a39551addd69/test/element.js#L578

Element.asPX returning 0 when size given in ems

This test used to pass, so appears to have broken with a fairly recent change.

Test:
https://github.com/adobe-webplatform/savage/blob/2a8f553eaf66b5036c4442556333cd6701f5c963/test/element.js#L182

Change project description

Change the project description to:

A JavaScript library for modern SVG graphics.

Coffee Maker fonts don't work

Check the screenshot. Please do one of the following:

• Use a font from Typekit/Edge Web Fonts.
• Use a font that more people have installed.

Please do not:

• Check in the AdobeClean-Light font into this repo. (We can't do that.)

Let me know if you have questions. If you need another font, ask Yohei.

Mention of sudo with npm

The README should mention that you might need to use sudo with npm, depending on your configuration.

Add ability to animate transforms in SVG and in Matrix formats.

Set.exclude returns undefined instead of false

I know, this one's kind of nitpicky, but since the docs say it returns a boolean, it's technically failing. :)

Test:
https://github.com/adobe-webplatform/savage/blob/b04c154dfeb32f6c4534ba2136115455c56933e4/test/set.js#L28

Transform object "string" property returns array instead of string

Unlike the docs claim, the "string" property in the object returned by Element.transform() is an array of strings, rather than a string.

Test:
https://github.com/adobe-webplatform/savage/blob/630b66058d99e183192643fd16e6df03d66a1af0/test/element.js#L370

Inconsistancy between Element.clone implementation and documentation

The API docs say Element.clone creates and returns a element, but the implementation uses cloneNode to copy the element, without a element being created.

Remove .DS_Store files from repo

And add to your .gitignore file.

The animated-game demo doesn't work in Firefox

Let's debug. If it's a bug in Snap, please assign to Dmitry.

Undefined variable "lowerCase" in pathToRelative function

See here:
https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L552

Looks like it's expected to be String.prototype.toLowerCase

consider a package manager

npm / component / bower or something so that the little chunks are useful to people (and to keep yourself sane), then produce a snap build from those. Otherwise looks good! :D

IE 10: Docs page - Border shows up with logo and search field not showing up properly.

See attached screenshot

IE 10 - Getting Started: forward button often gets stuck at step 2 and 3

IE10, Getting Started - clicking forward button often gets stuck at step 2 and 3. Works fine with Chrome

Color parsing fails when using percentages

According to the API docs under Savage.getRGB(colour) it should be possible to parse colors with percentages set, like rgb(•••%, •••%, •••%) for rgb, hsl and hsb. However, all tests with strings like this appear to fail.

Add a link to the browsable docs to the README

Let's make the docs browsable (a GitHub page?) and put a link in the README.

Remove code callouts on Coffee Maker demo

We decided to get rid of the code callouts on the coffee maker demo, so please remove them.

Create a "getting started" guide

Write a getting started guide for the site, and link to it from the README. It should include:

• Getting the repo (or downloading the zip file).
• Building it with grunt.
• Including the library.
• Initializing Snap.
• Drawing a couple of shapes.
• Animating them.

Write it up, and send it to Yohei for inclusion on the site.

IE 10: Demo - Croc infographic missing some graphics

See attached screenshot. Works fine with Chrome

Element.removeData without key fails to remove all data from element

According to the API docs Element.removeData should remove all the data from the element, but in this test it leaves part of the data.

https://github.com/adobe-webplatform/savage/blob/db9eb2e8a2eefdceb1b8f727c4f1aa8f73979b6e/test/element.js#L175

Animated map demo works differently in Firefox

The map is positioned differently and moves off the bottom of the screen. (Low priority.)

Setting "class" attribute on a group element using attr() has no effect

This is also causing my innerSVG test to fail, after finding that I split it up into a new test.

See test:
https://github.com/adobe-webplatform/savage/blob/440f4cef941b76518d3de384c70959c6d959ef8c/test/element.js#L151

Savage.filter.shadow fails to correctly process when given color param but not blur

Test here:
https://github.com/adobe-webplatform/savage/blob/531fca593769a696502be3ede2d5dbe424fc3dee/test/filter.js#L68

Add a link to the Snap.svg website

Add a link to the Snap.svg site in the README. The link is (or will be) snapsvg.io.

Using Element.animate() with easing and callback fails

Seems like the callback never gets called. Works fine with only easing/callback or neither, but problem occurs when supplying both.

Test:
https://github.com/adobe-webplatform/savage/blob/630b66058d99e183192643fd16e6df03d66a1af0/test/element.js#L314

Create a "demos" directory

Create a "demos" directory for the samples. Create directories for each demo so the HTML and SVG assets are together. Name the demo directories something descriptive (i.e. "map", "barista", etc.).

Get rid of elemental.js in favour of browser parsing.

Animation methods with easing and callback params not working

Probably the same issue as in issue #5

Tests:
https://github.com/adobe-webplatform/savage/blob/master/test/savage-tests.js#L89
https://github.com/adobe-webplatform/savage/blob/master/test/savage-tests.js#L156

Make Coffee Maker demo labels clickable

People won't always know to "twist" (drag) the knob. Please make the labels clickable, as well.

Savage.findDotsAtSegment does not exist

The docs mention a Savage.findDotsAtSegment but this should probably be Savage.path.findDotsAtSegment

Element.equal("transform", "") doesn’t work properly for IE10

It returns {from: 0, to: 0}, which doesn’t make sense.

Issue with triggering .animate() from another .animate()'s callback

Came across a case where Element.animate() is not triggered from within another Element.animate()'s callback. I was able to resolve the issue by wrapping the second animate function in a setTimeout of 50ms. Appears to be a timing issue.

road_bottom.animate({x2:691.5}, 2000, function(){
    tunnel_mask_bottom_right.animate({
        y: 394,
        height:150
    }, 200);
    });

Espresso option for Coffee Maker demo throws error

Uncaught TypeError: Property '-72' of object # is not a function

Add missing unit tests

Looking the API docs and existing tests, the following methods still need testing and will be tracked here:

Savage

• Savage.Matrix()
• Savage.ajax()
• Savage.animate()
• Savage.animation()
• Savage.color()
• Savage.deg()
• Savage.format()
• Savage.fragment()
• Savage.getRGB()
• Savage.hsb()
• Savage.hsb2rgb()
• Savage.hsl()
• Savage.hsl2rgb()
• Savage.is()
• Savage.load()
• Savage.parse()
• Savage.parsePathString()
• Savage.parseTransformString()
• Savage.pathBBox()
• Savage.rad()
• Savage.rgb()
• Savage.rgb2hsb()
• Savage.rgb2hsl()
• Savage.select()
• Savage.selectAll()
• Savage.snapTo()

Savage.filter

• Savage.filter.blur()
• Savage.filter.brightness()
• Savage.filter.contrast()
• Savage.filter.grayscale()
• Savage.filter.hueRotate()
• Savage.filter.invert()
• Savage.filter.saturate()
• Savage.filter.sepia()
• Savage.filter.shadow()

Savage.path

• Savage.path.findDotsAtSegment()
• Savage.path.toAbsolute()
• Savage.path.toCubic()
• Savage.path.toRelative()
• Savage.path.map()
• Savage.path.isPointInside()
• Savage.path.intersection()

Matrix

• Matrix.add()
• Matrix.clone()
• Matrix.invert()
• Matrix.rotate()
• Matrix.scale()
• Matrix.split()
• Matrix.toTransformString()
• Matrix.translate()
• Matrix.x()
• Matrix.y()

Set

• Set.clear()
• Set.exclude()
• Set.forEach()
• Set.pop()
• Set.push()
• Set.splice()

Mina

• mina.backin()
• mina.backout()
• mina.bounce()
• mina.easein()
• mina.easeinout()
• mina.easeout()
• mina.elastic()
• mina.getById()
• mina.linear()
• mina.time()

API Reference for Savage.path.bezierBBox is incorrect

The docs claim the returned output is an object with a certain format, instead it returns a BBox object that does not match that format. I assume the docs here are incorrect, rather than the behavior.

Element.prepend prepends element to parent rather than self

Should be easily fixed by replacing this.node.parentNode with this.node

Test: https://github.com/adobe-webplatform/savage/blob/eea4f89d29c5df1fa53f721022a878bb2ca3d9bb/test/element.js#L56

API Reference for Matrix.add incorrect

Currently it appears as:
Matrix.add(a, b, c, d, e, f, matrix)

which based on the code should be split to accepting either a-f params or just the matrix.

Snap logo is throwing an error

Very high priority.

The snap-mascot demo isn't working. Mousing over the mascot throws this error:

Uncaught TypeError: string is not a function: snap.svg-min.js 18

Element.data not functioning as expected

Test returns 'eldata is not defined' error when attempting to set data.

Test:
https://github.com/adobe-webplatform/savage/blob/eea4f89d29c5df1fa53f721022a878bb2ca3d9bb/test/element.js#L145

Savage.pathBBox does not exist

API docs refer to Savage.pathBBox, this should probably be changed to Savage.path.getBBox or added as an alias.

The removed test should return!

Investigate why the test is not passing while the same code on the page is working perfectly.

The broken test code:

    it("Element.asPX - from em", function() {
        var rect = s.rect(0, 0, 10, '10em');
        var heightAsPx = rect.asPX("height");
        expect(heightAsPx).to.be(160); // assumes 1em = 16px, is this safe?
    });

stroke-dashoffset does not animate

following code does not animate line as it should:

var s = new Snap('100%', '100%');
myPath = s.path('M0,0c0,0,0-28.008,0-46.707S0-89,0-89');
myPath.attr({
'fill': 'none',
'stroke': 'red',
'stroke-width': 25,
'stroke-miterlimit': 10,
'stroke-linecap': 'round',
'opacity': 1,
'stroke-dasharray': "120 200",
'stroke-dashoffset': 0
});
myPath.transform('translate(100, 300)');
myPath.animate({'stroke-dashoffset': 120});

Documentation for Snap constructor

The docs for Snap skip over the constructor options.

Create a v0.1.0 tag

Once all issues have been addressed, create a v0.1.0 tag and get Yohie the link to the zip file.

Set.splice removes 3 items when count is set to 2

Test:
https://github.com/adobe-webplatform/savage/blob/b04c154dfeb32f6c4534ba2136115455c56933e4/test/set.js#L80

Element.onDragOver not working (in unit test)

Not sure if this is a problem with the way I'm testing the method, but I would expect it to work.

Test:
https://github.com/adobe-webplatform/savage/blob/440f4cef941b76518d3de384c70959c6d959ef8c/test/element.js#L600