Mastering SVG

Snap.svg utilities

This example will illustrate a couple of useful Snap utilities available for working with SVG. The whole purpose of working with a general-purpose library like Snap is to use utility methods such as the following. This example shows just two such utilities, but this should be enough to show you the sort of things that are available.  

The beginning of the example is standard Snap.svg development. You start by getting a reference to the #target element. We create a Snap variable, S, and then append it to the #target element. 

Once it's in the document, we can use the first of two utilities. It's a single line assignment to the variable bbox, which returns the bounding box of an SVG element, in this case, a circle.

A bounding ...