This is an archived post. You won't be able to vote or comment.

47
48

Any thoughts on Snap.svg? (self.webdev)

submitted by twocoffeespoons

sorry, this has been archived and can no longer be voted on

I've been delving in deeper into web development lately. Design and interactivity have always been my soft spots. While building my portfolio I've been wanting to utilize more of both. A few days ago I stumbled upon Snap.svg. Being relatively unsure of myself and new to the field I was wondering if anyone has prior experience utilizing animated/interactive svgs for the web?

Trying to parse out which languages/best practices to focus on is a little overwhelming and I just don't want to waste my time on something outdated or with poor browser compatibility. Any thoughts? Could this be something we might see more in the future online or is there a reason I rarely see animated elements like this?

P.S- My dream is to one day make interactive data visualizations / educational sites for students. I'm already studying d3.js as well if that helps.

all 14 comments
sorted by:
best
topnewcontroversialoldq&a

[–]smchaha 17 points18 points  (7 children)

sorry, this has been archived and can no longer be voted on

I am actually just starting to use Snap myself in an interactive data visualization.

I highly recommend it. I was originally animating everything on canvas but that turned into a mess. Multiple canvasses layered on top of each other so that I didn't have to redraw everything with the constantly updating data and also provide the user interaction on top. I tried using jCanvas, it made things better and could handle mouse events on the canvas but things were still messy.

Then.... I found D3 and started using SVG and Snap. It changed my life. With canvas, it got to a point where I was dreading work every morning because it meant canvas time. I would work on backend development to avoid having to deal with the canvas. Using D3 + Snap now, things are moving full speed ahead. Side note: D3, jQuery, and Snap work together surprisingly well. Also, CSS styling has power over svg elements.

EDIT: since I didnt actually answer all your questions:

Snap is not a waste of time, nor is it going to be outdated. Quoting from the Why Snap? page http://snapsvg.io/about/:

Currently, the most popular library for working with SVG is Raphaël. One of the primary reasons Raphaël became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting more modern browsers means that Snap can support features like masking, clipping, patterns, full gradients, groups, and more.

[–]givertex 3 points4 points  (3 children)

sorry, this has been archived and can no longer be voted on

Would you mind posting an example of D3+snap? This sounds incredibly great.

[–]smchaha 1 point2 points  (2 children)

sorry, this has been archived and can no longer be voted on

I will give a link to the visualization when finished/goes public. I described the general way in which I use them together below in response to u/maBrain.

[–]diodenyc 0 points1 point  (1 child)

sorry, this has been archived and can no longer be voted on

Is the visualization finished or public yet? I would love to see this in action as well.

[–]smchaha 0 points1 point  (0 children)

sorry, this has been archived and can no longer be voted on

I have been putting off replying to this until I could say yes. It is now public at http://auror.ae

It is still in development. I would love to hear any feedback you have.

*edit: Since writing the previous posts, I have taken out the Snap dependency. All svg interaction is done through D3 and hover events in jQuery. I think this simplifies things but when I wrote earlier I was drawing the Flickr and Twitter pop ups using Snap. In this use case, they accomplish the same thing and since I am already drawing the globe using D3 I decided to keep everything in D3.

[–]maBrain 3 points4 points  (2 children)

sorry, this has been archived and can no longer be voted on

I second u/givertex. In fact, a tutorial on how the two might work together (w/ jQuery as well) would be interesting to read.

[–]smchaha 3 points4 points  (1 child)

sorry, this has been archived and can no longer be voted on

I have never written a tutorial but I will try to give a summary. Assuming basic familiarity with both D3 and Snap: The following is possible.

d3.select('.somethingsvg').data(data).each(function(d) { Snap(this).whatever; });

d3 selects the nodes and takes the data. (You may have to use .enter and/or .append if you are creating more nodes or have more data than current nodes.) The .each function runs for each selected node and inside that anon fn you can use Snap(this) to reference the node for which the iteration of each is running and perform some kind of action.

In my project, I am using Snap to implement some hover event listeners. I could use jQuery to implement the hover events because it integrates equally well, however, since it is an svg I am using Snap since I am drawing more svg on hover.

[–]maBrain 1 point2 points  (0 children)

sorry, this has been archived and can no longer be voted on

Thanks. Sounds like there's the potential to do some very cool things with that combo.

[–]duncanlock 7 points8 points  (0 children)

sorry, this has been archived and can no longer be voted on

No idea about snap.svg, but svg in general is a very good thing to be familiar with, especially if you want to get into data vis.

[–]jacobpellegren 2 points3 points  (0 children)

sorry, this has been archived and can no longer be voted on

I found the learning curve from a library like jquery to snap.svg really easy to jump into. Though it makes me wary for the potential overlapping of functionality of latter. Either way, it's the most straight forward SVG manipulation/creation library out there.

[–]veckrot 2 points3 points  (0 children)

sorry, this has been archived and can no longer be voted on

Snap is great, just be wary if you have any animations that need to work on mobile. The performance will be very poor.

[–][deleted] 1 point2 points  (0 children)

sorry, this has been archived and can no longer be voted on

I literally just started using this on Thursday and couldn't be more pleased. My needs are very simple at the moment, I'm just manipulating a simple shape, but it was super easy to accomplish and I actually look forward to using this again for something more complex to see how it stands up

[–]thisguy1111 0 points1 point  (0 children)

sorry, this has been archived and can no longer be voted on

Looks like a solution in search of a problem. What does this do that, say, d3 doesn't in terms of interactive data visualization?