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: