Image maps are defined separately from the image source.

ItвЂ™s possible to apply a clickable target to a portion of an tag using an image map. LetвЂ™s say you donвЂ™t have control over the SVG markup, or that you need to add a clickable area to a raster image instead.

The viewbox for this SVG is still a rectangle, so wrapping the entire SVG element wouldnвЂ™t have the same effect. The only trick here is to make sure the tag is inside the SVG markup and that the tag wraps the shape you want to be clickable. 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.

Sejda add clickable shapes