For those of you that have read my post "SVGs are Cool & You Should Start Using Them, If You’re Not Already" you know that I am a fan of SVGs. In fact, now that I know a little more about them I feel that they are very under used in modern web development. They are light weight, resolution independent, and they really open up the door to so many possibilities for enhancing user experiences.

It seems as though part of the reason that their use tends to be limited despite decent browser support is the lack of understanding about just what can be achieved when using them. For me, when I used to think of SVGs I immediately thought of an SVG as an asset and never about using JavaScript to modify and generate dynamic embedded SVGs. This is where the new JavaScript library Snap.svg really shines.

Snap.svg for SVG manipulation is compared to jQuery for DOM manipulation. It provides a method for generating SVG content solely with JavaScript. If you don’t have a need for that, it’s ok, Snap.svg still works with SVGs created in other programs such as Adobe Illustrator. It also provides a powerful animation library complete with event handling geared specifically at manipulating SVGs for modern browsers. This library helps to bring SVGs to life by animating with masking, clipping, and patterns among other new SVG features.

Perhaps the most intriguing feature of Snap.svg the ability it provides to pull out pieces of your SVG code for use in SVG sprites. This allows you to save on http requests and allows JavaScript to interact with the components of the SVG sprite to manipulate it as needed.

This video demonstrates exactly how it works

Demos

You can check out some demos here.

Download

You can download Snap.svg here, it’s free and opensource.