Snap – A JavaScript SVG Library

http://snapsvg.io/

by slig • 13 years ago

304 57 13 years ago

snapsvg.io

jadit2• 13 years ago

Be sure to also follow our Twitter account @snapsvg for updates!

-JD @jonathanAdunlap

teleclimber3• 13 years ago

Libraries like this come up on HN on a regular basis it seems. As I read through the site I kept asking myself "this looks great and all, but can I depend on it in the long term?".

Then I came across the "about" section where it says it was created by the creator of Raphael.js[1].

Say no more.. I'm in!

[1] http://raphaeljs.com/

danso2• 13 years ago

I came across the snapsvg announcement in a Tweet by the creator:

https://twitter.com/DmitryBaranovsk/status/39305298289322393...

Here we go: new SVG library from Adobe by yours truly Snap.svg. Snapsvg.io

I didn't know Dmitry was Raphael's creator nor that he was working for Adobe. So all I saw was "Adobe" and thought "Flash" and then, "Nah"

teleclimber3• 13 years ago

I hear you on the Flash stigma, but you have to figure an open source library written in a widely used language to interact with an open standard that is largely adopted won't make you suffer the same as Flash?

Already__Taken• 13 years ago

Adobe seem to put out some pretty sweet HTML5 stuff. They know flash is going and are jumping on the next big thing in a healthy way.

That IDE he's using in the video is called brackets[1] and it's originally from adobe. I'm watching it closely to jump from sublime to it.

[1] http://www.brackets.io/

ye• 13 years ago

Why not just release a new version of RaphaelJS and stop supporting anything before IE9?

He now has two very similar (but not compatible) libraries to support.

Raphaël.js is great, btw.

quest88• 13 years ago

I saw Dmitry's presentation yesterday over SnapSVG.

Raphael was, and is, meant to support older browsers. This comes with a cost of not being able to fully use everything SVG has to offer. Thus, Snap was born. He simply can't put everything into raphael to make it compatible with older browsers.

Raphael will still be getting bug fixes as the come in but is overall feature complete. In fact, Snap shares some of the same code raphael has, so maybe some bugs found in snap will be fixed in raphael as well.

smrtinsert2• 13 years ago

Hopefully it doesn't get acquired by Sencha as well. I'm done with all things Sencha.

nraynaud3• 13 years ago

I find a bit strange not to have contributed in svg.js ( http://www.svgjs.com/ ). Not Invented Here ?

DanielRibeiro• 13 years ago

The author actually just gave a talk (actually finishing it) and he explained: he did not like the code style (svg.js does not use semicolons at the end of the lines).

Well that is what he said. But I believe having created Raphael.js in 2008, much before svg.js existed, also influenced his decision.

nraynaud3• 13 years ago

why not forking then ?

achal• 13 years ago

Same question. I was using Raphael.js earlier and had to switch to svg.js for SVG specific features, and it's quite a nice library, though perhaps not as developed as Raphael in terms of documentation.

The only possible conflicting goal I can imagine is that one of svg.js' goals is to be as small as possible (e.g. generating an <ellipse> instead of a <circle> to increase code reuse between the circle and ellipse shapes[1]).

[1] http://documentup.com/wout/svg.js#elements/circle

cashmonkey85• 13 years ago

I've found svg.js unusable for any project I've had as it requires all svg content to be created with svg.js and no imports.

nraynaud3• 13 years ago

why not edit it? it's open source.

zyang• 13 years ago

Is svg serialization supported? I looked in the doc but couldn't find anything.

*Edit - toString()?

ep103• 13 years ago

I feel like whenever one of these gets posted, it should have a compare / contrast with d3.js

danso2• 13 years ago

The OP's description makes it pretty clear. This is a library that seems specifically geared toward those who create SVGs in programs like Illustrator. That it is described as "jQuery for SVGs" should imply that it serves a different need than D3, as one usually does not call or think of D3 as the "jQuery for SVG data visualizations"

zabraxias• 13 years ago

The moment we start calling things "the jQuery of..." we're no better than startups that are "the Facebook of..." :)

geovizer• 13 years ago

Agreed. And, I think it would be helpful (and increase credibility) for the Snap creators to include a comparison with D3.js at http://snapsvg.io/about/.

smrtinsert2• 13 years ago

This is a drawing lib, not a data binding lib. d3 is largely rendering agnostic. You wouldn't use them in the same way like you wouldn't compare contrast a car with an engine.

spicyj• 13 years ago

I had a really time figuring out what this is, but the "Getting Started" page shows off the API a bit. Wonder why they didn't just call it Raphael 3.0.

slig• 13 years ago

Raphael has a really complex abstraction that does loads of magic to make it work on IE.

So I'm guessing this way they can map directly to SVG and not worry about breaking APIs and compatibility.

thurn• 13 years ago

This is awesome. One of the problems I've had with Raphael is that it's explicitly not supposed to be an SVG library, so SVG-specific features tend to go unsupported. SVG groups are probably the most obvious example of this.

adyus3• 13 years ago

Without knowing this fact about Raphael, I was about to reply to another comment prematurely. I was going to complain that having the same author as Raphael doesn't explain why Snap.js exists, instead of a better version of Raphael.

Thank you.

alxndr• 13 years ago

There's a helpful "Why Snap?" page that points this out, as well as that it supports animation.

twistedpair3• 13 years ago

That's the point, RaphaelJs is to allow SVG use on IE by converting it to VML.

startithub2• 13 years ago

This library really looks great; I was wondering if charts (financial, statistics,...) are supported, for example, by connecting to data sources in JSON, etc

noahmarc• 13 years ago

I wouldn't mind taking a closer look at that. They do have a data API to store individual key value pairs http://snapsvg.io/docs/#Element.data

Definitely different than what I'm used to in D3js, but worst case scenario you would have to loop through each key value pair. Worth testing out.

startithub2• 13 years ago

You're right, noahmarc, it's the same for me, I'm now too used to working with D3j, that I definitely need to find my way in Snapsvg library, as it really looks promising; maybe it'd be better to arrange a high level specialized class library to handle not only worst case scenario, but even common chart functions, as the Api itself looks quite low level code...

gnuvince• 13 years ago

This may cause confusion with the Snap Framework [1].

[1] http://snapframework.com/

chc• 13 years ago

These two products are far from the only ones to use the name "Snap."

miweiss• 13 years ago

Or the snap visual programming language: http://snap.berkeley.edu/snapsource/snap.html

franze2• 13 years ago

today i recovered this http://web.archive.org/web/20080426161839/http://www.fragmen... via waybackmachine. i coded this in 2006 (its optimized for IE6 and the (at that time cutting edge now for a long time deprecated) adobe svg plugin). basically a LOGO like language in svg and js.

the good news is: it still works (webkit), the bad news is that i still dont believe that SVG is the future. fool me once ...

loupeabody• 13 years ago

Care to share why?

franze2• 13 years ago

personal disappointment is pretty high up on the list: i was an early adopter SVG ninja, i believed in the revolution, and the revolution didn't happen.

and i understood why: SVG is a technology invented and specified by a committee built upon a technology invented and specified by a committee (XML). now combine this with the most anarchistic technology in the internet, i'm talking about the one technology that is still untamed in it's raw from, mischievous and sometimes plain dumbevil in it's details, yes, i'm talking about the DOM. that's why working with SVG always felt clunky and massochistic to me.

so if you touch SVG always use a high level clever abstraction. and well this seems the point of snap.svg. maybe i will give it another try. but the thing is, whenever i use a high level abstraction i will sooner or later go down into the pits again, because i want to know how it works and whatever else i can make it do, and then i will probably hate myself again for giving svg another shot....

dingdingdang• 13 years ago

Nice and being made by Raphael author certainly does not hurt, still, the examples section could really do with bit of work: out of the 4 examples only 3 works proper for me and only the simply coffee maker and mascot bits are really smooth. The game is jerking about and not working proper on FF24: http://snapsvg.io/demos/#game

digitailor• 13 years ago

SVG integration with JS and the DOM has been elusive and underdeveloped in the past. Between this and d3, there's finally a lot happening in this space. These are very slick libs, they are thorough and comprehensive with very sophisticated authors.

I have capable and deep server-side SVG generation libraries I've written for CAD/CAM applications. I've always wanted to use them for generating all-or-mostly SVG web UIs. I can generate an SVG view straight from a model, and it's not an HTML+CSS cludge. The SVG's relationship with the data object is much more clear. With better JS manipulation support from libraries like this, the possibility of a rich and full-featured implementation is closer.

Not to mention that the browser vendors are FINALLY putting effort into truly supporting SVG, after 10+ years. It's good to prod them in this direction by demoing. Maybe we can help encourage an SVG-support vendor battle like what's going on for JS engines.

Time for me to get started on open sourcing my libs. They need to be completely broken out and made more general but I think it's time to join in and support these excellent efforts.

philip1209• 13 years ago

I just watched some demos of this at the HTML5 Dev Conference - there are some cool uses.

The game on the PBS homepage uses a prototype version of the library:

http://pbskids.org/

sambeau• 13 years ago

In a comment on a thread about SVG libraries recently, here on HN, I opined that the world was long in need of a library that takes pre-made, artist created SVG and manipulates it: a jQuery for SVG.

And here it is and I am very grateful. Thank you, Dmitry. Thank you, Adobe.

We also need a world where once again Adobe create great open technologies and fund their development by building superb commercial tools for them.

I eagerly await new tools that work with Snap!

premasagar3• 13 years ago

Wow. Snap looks beautiful. Nice one, Dmitry.

I've been enjoying working on my own SVG library, Pablo[1]. It's inspired in part by the fun I've had using Raphael, and wanting to explore what can happen when SVG is a first-class citizen of a library.

[1] http://pablojs.com

premasagar3• 13 years ago

When I added the ability to import existing SVG images into Pablo, and to export the generated SVG in different image formats[1], I was pretty thrilled by the possibilities of having a JavaScript bridge between the design tools and the web app, the designer and the developer. And I see that Snap is also totally aligned to this kind of interaction between the web app and the external graphics tools, like Illustrator, Inkscape and SVG Edit.

The obvious next step is for a drop-dead simple visual interface to choreograph the graphics and the animations, with hooks into the rest of the JavaScript application. It could might be a game, interactive art, a visualisation or anything with graphics. Flash is dead, but there is nothing that exists for the open web that is as intuitive and fun to use as the Flash IDE was.

It must be just a matter of time before a tool as brilliant as the Flash IDE comes along for the open web, and I can imagine it makes a lot of sense for Adobe to be in on it.

[1] http://pablojs.com/api/#Import-Export

brissmyr• 13 years ago

Snap.svg being able to parse existing SVG:s I've generated with Sketch is totally awesome. Even more awesome would be the day when Sketch lets me play around with animations and timelines and then generate Snap.svg instructions.

drawkbox• 13 years ago

Looks like a good replacement for the vector side of flash and is partnered with Adobe. The SVG looks very clean and it is nice to have it load SVG files and create on the fly. Also awesome that it is made by the developer of the Raphael library.

One problem with intensely declarative content is bad naming, verboseness and strange groupings/ordering. Silverlight had this problem and SVG has it a bit in terms of content from other programs like Illustrator, SVG exporters etc. Adobe will probably be developing tools to edit this maybe? SVG support is still a little lagging and the web is missing vector frameworks since Flash has been sidelined with mobile.

premasagar3• 13 years ago

There's a great little node.js-based tool called SVGO for removing the fluff and optimising SVG files: https://github.com/svg/svgo

ris• 13 years ago

Are blend modes other than "normal" usable in browser SVG yet? https://bugzilla.mozilla.org/show_bug.cgi?id=437554

j_m_b• 13 years ago

I don't see the animations on iOS 6 and Android mobile devices. Why not?

exo_duz• 13 years ago

According to this advanced SVG is not supported by Android.

http://caniuse.com/#cats=SVG

WhitneyLand• 13 years ago

Check your mobile device performance with two quick demo links:

snap.svg coffee demo (click wheel to animate) http://snapsvg.io/demos/#coffee

d3.js chart demo (click buttons to animate) http://bl.ocks.org/mbostock/3943967

Snap – A JavaScript SVG Library

Related Stories