Want help with Snap.svg? (And a few more examples...)

November 6, 2013 design development javascript

(This post is more than 2 years old.)

Just a quick note that if you are digging Snap.svg and want some support, you can post to the Google group that was set up: https://groups.google.com/forum/#!forum/snapsvg.

Obviously you can ask me as well (grin), and in fact, someone on the group already asked for a few small examples that I thought I'd share here. Nothing too exciting, but here we go.

First - I was asked about how to handle click events using Snap.svg. Snap.svg provides a click handler for your fragments (think parts of your SVG) that makes this easy.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ray1</title>
        <script src="snap.svg-min.js"></script>
		<script>
			window.onload = function () {
            	var s = Snap("100%", 600);
				Snap.load("first.svg", function(f) {
					
					redSomething = f.select("#red");

					redSomething.click(function() {
						console.log("You clicked the red thing!");	
					});
					
					s.append(f);
				});
				
			};
		
		</script>
    </head>
    <body>
		
		<div id="graphic"></div>
    </body>
</html>

You can run a demo of this here: http://www.raymondcamden.com/demos/2013/nov/1/test.html. Be sure to open your console of course and click the red thing. Thrilling.

Next I was asked to make the fragment animate to half its size. Animating a size difference is pretty easy too:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ray1</title>
        <script src="snap.svg-min.js"></script>
		<script>
			window.onload = function () {
            	var s = Snap("100%", 600);
				Snap.load("first.svg", function(f) {
					
					redSomething = f.select("#red");

					redSomething.click(function() {
						console.dir(redSomething);
						var width = redSomething.attr("width");
						var height = redSomething.attr("height");
						redSomething.animate({width:width/2,height:height/2}, 2000);
					});
					
					s.append(f);
				});
				
			};
		
		</script>
    </head>
    <body>
		
		<div id="graphic"></div>
    </body>
</html>

Again, not terribly thrilling, but easy to do. You can try this yourself here: http://www.raymondcamden.com/demos/2013/nov/1/test2.html.

For something that is thrilling, check out this article on animating icons with Snap.svg: Animated SVG Icons with Snap.svg.