

Snap – A JavaScript SVG Library - slig
http://snapsvg.io/

======
digitailor
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.

------
teleclimber
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/](http://raphaeljs.com/)

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

[https://twitter.com/DmitryBaranovsk/status/39305298289322393...](https://twitter.com/DmitryBaranovsk/status/393052982893223937)

> _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"

~~~
teleclimber
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?

~~~
selmnoo
Suffer the same fate as Flash?

The fate of sustaining comfortably for more than a good decade you mean?

~~~
teleclimber
?? I never wrote "Suffer the same fate as Flash". Please reread my comment. I
was referring to the previous poster's apparent pain with Flash. Not the fate
of Flash itself.

~~~
selmnoo
Sorry then, I guess I picked up a subtext which you (or the grandparent post)
did not intend.

------
sambeau
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!

------
thurn
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.

~~~
adyus
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
There's a helpful "Why Snap?" page that points this out, as well as that it
supports animation.

~~~
twistedpair
SMIL is the SVG animation markup. Sadly very few people have every used it.
SvgWow.com has a bunch of great examples like: [http://svg-
wow.org/camera/camera.xhtml](http://svg-wow.org/camera/camera.xhtml)

~~~
Groxx
There's an awful lot of Javascript backing that animation, I can't see where
it's being turned into SMIL. At the very least it's definitely not static on
the page, since the definition of the animation is entirely in JS:
[http://svg-wow.org/camera/camera.js](http://svg-wow.org/camera/camera.js)

Does it write SMIL somewhere near the end and then let it run, or does it just
run in JS? Skimming through I couldn't tell, but I don't really have time to
read more closely.

~~~
twistedpair
Some JS is still used, certainly. However you can define the animation steps,
timings, recursion, panning, zooming and many other facets purely in SVG/SMIL.
When I wrote a financial world map visualization and drill down tool, 95% of
the animation logic was in SVG/SMIL. The JS just called start/stop on the
various animation elements.

------
franze
today i recovered this
[http://web.archive.org/web/20080426161839/http://www.fragmen...](http://web.archive.org/web/20080426161839/http://www.fragmentarisch.net/svg/drawingboard.php)
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
Care to share why?

~~~
franze
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....

~~~
RussianCow
That's like saying you don't believe in memory allocation and pointers because
they're "untamed" and "mischievous". Sure, low-level APIs/formats are a pain
to work with, but that's the whole point of abstractions like this. If you
hate yourself for learning how something low-level works, that sounds like a
personal problem. :)

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

-JD @jonathanAdunlap

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

[1] [http://snapframework.com/](http://snapframework.com/)

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

------
drawkbox
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.

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

------
dingdingdang
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](http://snapsvg.io/demos/#game)

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

~~~
DanielRibeiro
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.

~~~
nraynaud
why not forking then ?

------
WhitneyLand
Check your mobile device performance with two quick demo links:

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

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

------
premasagar
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](http://pablojs.com)

~~~
premasagar
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](http://pablojs.com/api/#Import-
Export)

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

~~~
danso
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
The moment we start calling things "the jQuery of..." we're no better than
startups that are "the Facebook of..." :)

------
philip1209
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/](http://pbskids.org/)

------
brissmyr
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.

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

------
spicyj
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
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.

------
startithub
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
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](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.

~~~
startithub
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...

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

*Edit - toString()?

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

~~~
exo_duz
According to this advanced SVG is not supported by Android.

[http://caniuse.com/#cats=SVG](http://caniuse.com/#cats=SVG)

