SVG bounding boxes

I have been doing a lot of research with SVG lately and have found it to be a wonderful subsection of graphics and programming. With it's increase in popularity in the web development community, it has been touted as the solution for the huge range of screen resolutions, as well as being used for other things such as filters and effects. Today I wanted to talk specifically about it's use for creating polygonal bounding boxes.

With HTML, every element has a rectangular bounding box. This is not generally a problem, except when layering more complicated images, of which some are links.

Above is an example from a site I worked on recently, sevenpsychopaths.com. The bounding box that triggers the link is highlighted in blue, and you can see that it extends from the actual imagery itself by quite a bit.

In response to this, I wrote this quick bounding box test using SVG:

To create this, I followed this tutorial to wrap a bitmap image with a path in Illustrator. I then saved that document as an SVG and dropped the SVG into the HTML document.

Adding interactivity is very easy. SVG elements can be styled with CSS just like HTML elements, and can be bound to events (such as onclick) in javascript as well.

I don't tout this as the be all end all solution for bounding boxess in HTML, but I do think it offers an interesting solution for more dynamic interactivity!