Coder Perfect

make a clickable link out of an html svg object


I have an SVG object in my HTML website that I wrapped in an anchor so that when the user clicks on the svg image, it brings them to the anchor link.

<a href="">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>

When I use this code block, I don’t get to Google when I click the svg object. The span text in Internet Explorer 8 is clickable.

I don’t want to change the tags in my svg image.

What I’m wondering is how I can make the svg picture clickable.

Asked by iancoleman

Solution #1

Actually, the easiest method to solve this is to put the following code on the object> tag:

pointer-events: none;

When users using the Ad Blocker plugin hover over the upper right corner, a tab-like [Block] appears (the same as a flash banner gets). That will also be removed by using this css.

Answered by energee

Solution #2

I had the identical problem and was able to resolve it by:

Wrapping the object in a block or inline-block element.


Adding the following to the a> tag:

display: inline-block;
position: relative; 
z-index: 1;

as well as the span> tag:

display: inline-block;

as well as the object> tag:

position: relative; 
z-index: -1

See for an example.

Here’s where I found it: bug.cgi?id=294932

Answered by Richard

Solution #3

I wish I could take credit for this, but I discovered a solution here:

for the anchor, add the following to the css:

a.svg {
  position: relative;
  display: inline-block; 
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

<a href="#" class="svg">
  <object data="random.svg" type="image/svg+xml">
    <img src="random.jpg" />

Both the svg and the fallback versions of the link work.

Answered by noelmcg

Solution #4

You could alternatively include something like this at the bottom of your SVG (just before the /svg> tag):

<a xmlns="" id="anchor" xlink:href="/" xmlns:xlink="" target="_top">
    <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>

Simply change the link to suit your needs. To cover the SVG it sits in, I used 100 percent width and height. The clever folks at deserve credit for the technique, which I first saw in action there.

Answered by Ben Frain

Solution #5

Richard’s answer has been simplified. At the very least, it works on Firefox, Safari, and Opera:

<a href="..." style="display: block;">
    <object data="..." style="pointer-events: none;" />

Additional solutions can be found at

Answered by Feuermurmel

Post is based on