The href alone would have worked in Internet Explorer, Chrome, and Firefox. Note that I’ve used the deprecated xlink:href property in this demo to ensure that the link will work on Safari. In this example the link for the bullseye wraps a single circle element, but the more complex arrow shape is made up of two polygons and a path element. It can surround a group of SVG elements or just one. Your tag can surround a simple shape or more complex paths. This is as easy as wrapping the target with an tag, just as you would a nested html element. The simplest way to make a portion of an SVG clickable is to add an SVG hyperlink element to the markup. If your click target is an image or a portion of an image, and you have the ability to choose SVG as its format, you already have a great deal of control over how that element will behave on your page. However, you can also control the shape of that region with different techniques, making sure the target for your click area exactly matches what’s visible on the screen.

You can surround those assets with an un-styled tag to get a clickable rectangle that’s approximately the right size. Or you have an interactive image that responds differently when different regions of it are clicked. Or you have a large uniquely shaped logo where you only want that unique shape to be clickable.

Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Different website designs often call for a shape other than a square or rectangle to respond to a click event.

Inkscape crop shape out of image