Introducing Snap.svg

This post is more than 2 years old.

Today at the HTML5Dev Conference (http://html5devconf.com/) we announced the availability of Snap.svg. Snap.svg is the successor to Raphael . It is an open source JavaScript library that enables you to easily work with SVG graphics and animations. The library targets modern browsers (IE9, Safari, Chrome, Firefox, Opera) and provides support for making, clipping, gradients, animation, and more. Even cooler, it does so in a jQuery-ish familiar format.

You can find out more about Snap.svg at the web site: snapsvg.io. I'd start off with the awesome Getting Started tutorial. The tutorial gives a live code/output example of the library in action and is the best way to get a feel for how Snap does things.

For the details, you can hit up the docs and play around with the demos. Definitely check them out because the demo I built is ugly as heck, but I just wanted to give it a whirl myself.

I whipped up this beauty in Adobe Illustrator and saved it as a SVG file.

Once I had that, I wrote up a quick script to load this via Snap.svg.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ray1</title>
        <script src="../../dist/snap.svg.js"></script>
          <script>
               window.onload = function () {
                 var s = Snap("100%", 600);
                    Snap.load("first.svg", function(f) {
                         s.append(f);
                    });
                   
               };
         
          </script>
    </head>
    <body>
         
          <div id="graphic"></div>
    </body>
</html>

All this did was handle loading my SVG file and dropping it into the DOM for me. I knew I wanted to try manipulating the SVG itself, so I opened it up (remember, it is just XML) and added an ID to the red and blue blocks. Here's the definition for that wonderful piece of art.


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<rect x="99.5" y="71.5" fill="#E21B1B" stroke="#000000" stroke-miterlimit="10" width="105" height="52" id="red" />
<rect x="99.5" y="141.5" fill="#404AD3" stroke="#000000" stroke-miterlimit="10" width="110" height="165" id="blue" />
</svg>

With IDs, I then added a bit of animation to my SVG:


               window.onload = function () {
                 var s = Snap("100%", 600);
                    Snap.load("first.svg", function(f) {
                         something = f.select("#red");
                         something.attr({fill:"#000"});
                         something.animate({fill:"#ff0000"},1000);
                         s.append(f);
                    });
                   
               };

Not terribly exciting, but darn easy to use. If you are so inclined you can run a demo of this yourself here: http://www.raymondcamden.com/demos/2013/oct/22/test1.html The animation is pretty fast so pay attention.

Give it a try yourself and let me know what you think.

Just found this - a nice video introduction:

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by John posted on 10/25/2013 at 6:50 PM

Thanks for sharing this. You are the first person I found sharing samples outside of the released samples from Adobe. Perhaps you can answer a question: Your sample, as well as those from Adobe, work when I open them directly with my browser. That is, I open the html file from the harddrive. However, when I try to access the same file via my local webserver, the load svg command does not work. All the other snap.svg library features appear to work (those provided in the Adobe demos) but svgs do not load or are not displayed through my web server. Do you have any advice?
thanks,
John

Comment 2 by Raymond Camden posted on 10/25/2013 at 7:30 PM

Hmm. That seems odd. So are you loading the SVG via a relative url? Can you show me the code (or a portion of it anyway).

As an FYI, you are welcome. I'm glad someone liked the post. :) I'm working on a slightly more advanced demo now.

Comment 3 by John posted on 10/25/2013 at 7:53 PM

Thank you for answering. I copied your html and svg files exactly. I put the html, svg, and snap.svg javascript in the same directory in my webserver's subdirectory. My PC is running Windows Vista and I view the web pages in FireFox. Normally, when I hit my webserver via my PC name or via localhost, I get a normal web client to web server interaction. But with this project, and all the samples from Adobe, the load svg just doesn't work. However, if I open the HTML directly in FireFox, the loading of SVGs works perfectly, for your sample as well as Adobe's.

Since posting my first comment, I've tried this in IE and Chrome and found that neither of these appear to be able to load an SVG regardless of how I open the html. However, my main goal is to get the web server interaction to work in FireFox, since FF can display the SVGs.

I should also add that I'm a flash developer and have never had to understand the web site development side of things. It's not your job to bring up to speed if the problem is ignorance on my part. So, I don't want to burn much of your time on this.

thanks,
jg

Comment 4 by Raymond Camden posted on 10/26/2013 at 5:07 PM

Hmm. So I guess what I'd recommend is to open the Dev Tools on your browser. This can give you a clue as to what is wrong. It is probably something simple as my demo is rather simple. If you've never encountered your browser dev tools before, there is a wealth of examples out there. Here is a recording of a presentation I did on the topic:

http://www.raymondcamden.co...

Also - there is now a Google Group for Snap help. (I'm not saying to stop asking for help, just pointing it out. :)

https://groups.google.com/f...

Comment 5 by John posted on 10/28/2013 at 6:35 PM

Thanks. I will look into these suggestions. And I'll look for any projects you dabble with here.
jg

Comment 6 by Raymond Camden posted on 10/28/2013 at 6:45 PM

John, check out my new blog post on Snap - http://www.raymondcamden.co....

Comment 7 by Gavin posted on 10/30/2013 at 9:07 AM

You have probably worked it out already... But when trying new things on windows boxes ... I always waste a bunch of time before making sure the (web) server is setup to serve that mine type.

Sounds like it might be the issue, anyways, thought it might help.

Thanks Ray as usual for interesting stuff to add to my todo list

Comment 8 by Chris posted on 11/6/2013 at 7:29 AM

John,

I was loading the local copy of my test file in Chrome on Mac, and I could not get the Load to work either. Opening it in Firefox worked, so I fired up MAMP and accessed the file via localhost, and it worked in Chrome.

Hopefully it will help. Finding your post helped me get to this point. I was ready to throw my MacBook against the wall.

Comment 9 by Joz posted on 7/26/2014 at 12:59 PM

Thanks! this help me a lot,

i put the id's on paths, are other way to select inner paths?

Comment 10 by Raymond Camden posted on 7/26/2014 at 5:07 PM

Not sure - but - don't forget they made a Snapsvg google group. :)

Comment 11 by Franco Alvarez posted on 2/6/2015 at 12:56 PM

Thanks for this great tuto!. But I have one question. For the SVG files, you call on the script the svg file, then you add <div id="graphic">... I dont really figured out how the script find by DOM or whatever the place or tag where SVG file goes! (sorry about my english)
Thanks a lot again!

Comment 12 (In reply to #11) by Raymond Camden posted on 2/6/2015 at 2:24 PM

Sorry - not quite sure what you are asking here.

Comment 13 (In reply to #12) by Franco Alvarez posted on 2/6/2015 at 3:24 PM

Haha, okay...
<script>
window.onload = function () {
var s = Snap("100%", 600);
Snap.load("first.svg", function(f) {
s.append(f);
});

};

</script>
</head>
<body>

<div id="graphic"></div>

I have this code right?, now how the Script know where put the svg file, I mean, in the script you dont use "graphic" ID...

Comment 14 (In reply to #13) by Raymond Camden posted on 2/6/2015 at 6:51 PM

Oh, like where it appends? I honestly don't remember. :( I'm sorry. I'd try the Google group.