Let's start by setting up - Basics
- After importing Snap.svg (check the JS tab) you will then need an SVG element in your HTML, you will also need to position it and size it, I am using Bootstrap to simplify things, but you can use something else (plain CSS,other frameworks, JS).
YOUR-SNAP-ELEMENT.mouseup(FUNCTION TO HANDLE MOUSEUP)
And you are done : )
Importing vector graphics
Beyond simple primitives made with Snap, you can also import vector art made on other programs:Inkscape (Free) and Illustrator (Paid) are popular options , let's figure out how to import some art...
In order to make more complex and interactive graphics, we need to deal with multiple elements and complex paths, so let's try that.
- we are loading an external svg like before, but in this case the svg has 2 named paths truckY and textY, we then select each one by id with data.select("#id"), like a css selector.
- We now can move and resize them with by defining a Matrix (A coordinate system, you can read more about it here: Matrix transformations )
- Next we are attaching a hover to the truck and animating the text inside the Hover Handler
All together now<
So now that we have a basic understanding of Snap.svg let's try making an interactive animated vector graphic with Snap !
- Load and create all the separate elements and their initial attributes like position and visibility
- Attach interaction events and call animations
- The remaining code is just animation functions and event handlers
I personally love working with SVGs, they scale and display nicely and there are great tools for creating them, the problem usually is that they are not as performant as say HTML5 Canvas or CSS or easy to work with, Snap.svg is a super cool library that tries to bridge this gap and provide a basic yet complete set of tools for working with svg on the web, while not a complete replacement or solution,you can add very cool interactions in no time ( once you follow this or other guides ).
I hope this code samples spark your interest in making some cool interactive svg graphics for the web.