Experiments with Snap SVG

This is an exploration of the new SnapSVG libraryfromAdobe for animating and interacting with SVGs (Scalable Vector Graphics).

What I want to build is a very simple, web version of Skitch, a collaboration tool for marking up images and pdfs. I was surprised at how easy it was to get something going – check it out.

There’s a section in my hot, new portfolio site for projects that don’t get real estate in the parent view. It’s a catchall for sideline hacks, products covered by NDA, and so on:http://morganintrator.com/#other

That’s where you’d find this little project – a toolfor manipulating shapesin your web browser, with your mouse or – on a phone – your finger.

Theconcurrent technology

I use Skitchpretty heavily to write loud comments and pointers on documents, especially for this blog. Annotations like I did here:

Screen<em>Shot</em>2015-03-02<em>at</em>7<em>56</em>09_PM

I’d be a better spokesperson for Skitch if there were fewer steps required to use it. First, you have to have an Evernote account. Then you have to download Skitch. Then, right click the file you want to edit, and “Open with…” Skitch. Then, after adding some arrows and text, save it somewhere before you can share it.

Enter SnapSVG!

SVGs (Scalable Vector Graphics) are useful because a) that’s right, they scale without losing fidelity b) they can be really light-weight compared to a png or jpg file of the same image. Snap wants to make them richly interactive and animated.

I discovered Snap after at least 2 hours of googling for tutorials, codepens, and hacks in RaphaelJS. Snap needs some SEO attention, because Raphael was the only library showing up – when Snap is exactly what I wanted.

If you’re a developer/designer, go fall down this rabbit hole:Adobe & HTML. It’s a branch of Adobe bent on “movingthe web forward and givingweb designers and developers the best tools and services in the world.” It’s impressive (and again, a surprise). Some things you’ll find:

  1. Open source projects like Snap. They have a popular open source code editor called Brackets you might not have heard about.
  2. Web platform tools for bringing photoshop effects and features to the web.

For many of these projects, Adobe points to codepens, working examples of the code and design. That’s where we’ll look next.

Build

Search “snap svg” from the codepen.io homepage. When I looked their were 500 search results. I probably combed through 200 of them looking at what people were creating, digging into how they did it. Of course, I was also flagging the ones worth copying or borrowing from.

Specifically, I was looking for some demonstration of how I might drag the ends of a line. That was my first objective. Once that was done, I’d see how I could go about making sure the end of an arrow was drawn on one end.

‘Lo and behold. I found a codepen accomplishing something almost exactly to spec. Here’s the one I forked.Thank you Mark Lee for this:

Screen Shot 2015-05-22 at 3.45.21 PM



Now I’m going to fast-forward through the rest of the process – because it was just a process of tinkering my way through each successive hurdle:

  1. You could drag one end of the line in the first version – the one I forked.
  2. I wanted to drag both ends. This was version 2.0.

Screen Shot 2015-05-22 at 3.46.00 PM



Check it out! All in 26 lines of code! Way to go, Adobe.


Next up, I want to draw the arrow head. That’s going to involve some heavy trigonometry.