Hi,

This weekend I had an itch that I needed to scratch. I have sporadically been working on a project that uses SVG and javascript. I kept coming up against two problems: (1) getting a reliable bounding box around an SVG path, and (2) being able to properly align SVG paths with one another.

There are other solutions to finding the bounding box of an SVG path. Popular solutions are using the functionality of the SVG API itself, or using the awesome RaphaelJS library.

The SVG API is not pleasant to work with and, from what I understand, focuses more on operating at the level of the SVG node itself (what I would consider the root of the scene graph). I am more interested in working with the paths and composing objects from sets of paths. So, for the bounding information this is a little awkward, but it is really the alignment information that is unavailable. In particular, when you have an anchor point on a shape that is not in the middle or at the edges, it gets fiddly. I don't like fiddly. Especially, when I am working with things like Bezier curves that are really quite nice to work with. The information about the inflection points is really useful for what I am doing.

RaphaeJS is an awesome library but sometimes you just want to a solution to one particular problem. Since I was not intending to use RaphaelJS for anything else, just importing it to calculate a bounding box seemed wasteful.

And finally, I just wanted to solve it! :-) I love this kind of problem so I had a hard time not doing it.

The code is free and open and I hope some of you reading this may find it useful.

https://github.com/jdowner/bbox.js

-Josh