make an html svg object also a clickable link

Question

I have an SVG object in my HTML page and am wrapping it in an anchor so when the svg image is clicked it takes the user to the anchor link.

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

When I use this code block, clicking the svg object doesn't take me to google. In IE8< the span text is clickable.

I do not want to modify my svg image to contain tags.

My question is, how can I make the svg image clickable?

• Tyler: This single issue is responsible for SVG not picking up years after its introduction. This kind of behavior is unthinkable.

Answer 1

Actually, the best way to solve this is... on the <object> tag, use:

pointer-events: none;

Note: Users which have the Ad Blocker plugin installed get a tab-like [Block] at the upper right corner upon hovering (the same as a flash banner gets). By settings this css, that'll go away as well.

http://jsfiddle.net/energee/UL9k9/

• webdesserts: Note: IE won't support pointer-events on regular elements until IE 11, but already does support them on SVG. See caniuse.com/pointer-events
• MathieuLescure: A drawback of this solution (and the one from noelmcg as well) is if your SVG file contains CSS rules with a :hover selector, these rules will stop working. The solution proposed by Ben Frain doesn't have this problem.
• cadavre: This should be approved answer. Using img with svg makes then unusable for changing internal SVG styles.
• Gregor Macgregor: Great answer. I made mine universal with this in the global css. object[type*="svg"]{pointer-events: none}
• Mr Tsjolder from codidact: the svg seems to disappear in chrome 48 and opera 35 (clearly visible when replacing the fallback-image by some text...), but works fine in firefox and safari... Anyone who would know why?

Answer 2

I had the same issue and managed to solve this by:

Wrapping the object with an element set to block or inline-block

<a>
 <span>
 <object></object>
 </span>
</a>

Adding to <a> tag:

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

and to the <span> tag:

display: inline-block;

and to the <object> tag:

position: relative; 
z-index: -1

See an example here: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Found via comment 20 here https://bugzilla.mozilla.org/show_bug.cgi?id=294932

• Richard: Apologies, forgot the display: inline-block/block element to wrap around the object
• Baldráni: Best solution here !
• Kalpesh Popat: this is best solution for this problem and works on all browser
• sobelito: if image has transparent bg then those bits do not appear clickable
• sk03: This worked for me, I also had to add height: 100% to the a and span elements in my situation

Answer 3

Would like to take credit for this but I found a solution here:

https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

add the following to the css for the anchor:

a.svg {
 position: relative;
 display: inline-block; 
}
a.svg:after {
 content: ""; 
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left:0;
}
<a href="#" class="svg">
 <object data="random.svg" type="image/svg+xml">
 <img src="random.jpg" />
 </object>
</a>

Link works on the svg and on the fallback.

• Type-Style: This is the easiest and most supported solution in opinion
• qdev: this still has an issue: SVG pointer events (animations) are not working anymore (mouseover, mouseout, click) ! Just like simply using pointer-events: none on the object itself ...
• Jonathan E. Landrum: This was the only solution here that worked for me

Answer 4

You could also stick something like this in the bottom of your SVG (right before the closing </svg> tag):

<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
 <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>

Then just amend the link to suit. I have used 100% width and height to cover the SVG it sits in. Credit for the technique goes to the smart folks at Clearleft.com - that's where I first saw it used.

• MathieuLescure: I have css styles with a :hover selector embedded in my SVG file. This is the only solution which doesn't deactivate the style.

Answer 5

A simplification of Richard's solution. Works at least in Firefox, Safari and Opera:

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

See http://www.noupe.com/tutorial/svg-clickable-71346.html for additional solutions.

• element119: Thanks, I needed the display set to block or inline-block on the parent <a>.
• Serge Stroobandt: Good link: noupe.com/inspiration/tutorials-inspiration/… has pros and cons for each solution.
• Gwyneth Llewelyn: I also needed to use inline-block in some cases, but block seemed to work well on other cases; I guess it depends on the enclosing blocks...

Answer 6

The easiest way is to not use <object>. Instead use an <img> tag and the anchor should work just fine.

• Adrian Garner: The img tag would normally go where the span tag is for this to degrade gracefully.
• Luke: Isn't the idea to display an svg vector, not an image?
• dshap: @ErikDahlström but <img> with a reference to svg data doesn't always work as you expect, even in the latest version of Chrome :( stackoverflow.com/questions/15194870/…
• Antoine: As @energee pointed it out, you can use <object> tag and add a point-event: none; to make it clickable. It preserve access to your svg source code and allow you to dynamically manipulate it.
• godblessstrawberry: @Antoine actually correct property is 'pointer-events: none;' like mentioned below, this doesn't work, thank you though

Answer 7

To accomplish this in all browsers you need to use a combination of @energee, @Richard and @Feuermurmel methods.

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

Adding:

• pointer-events: none; makes it work in Firefox.
• display: block; gets it working in Chrome, and Safari.
• z-index: 1; z-index: -1; makes it work in IE as well.

• ChristopherStrydom: @janaspage I'm not sure... I haven't tried it out on IE 10. Let me know if it works :)
• Jason: @jaepage It shouldn't matter, because object will now be in a lower stacking-context (under) than it's parent.
• bafromca: does this work on an iPhone/mobile? doesn't for me. not clickable/tappable

Answer 8

I resolved this by editing the svg file too.

I wrapped the xml of the whole svg graphic in a group tag that has a click event as follows:

<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
 <!-- ... your graphics ... -->
</g>
</svg>

Solution works in all browsers that support object svg script. (default a img tag inside your object element for browsers that don't support svg and you'll cover the gamut of browsers)

• Robert Longson: Did you find that adding the onclick to the outer <svg> element and not wrapping it at all didn't work?
• Bruce Pezzlo: You can use the root svg element's events as well. in addition to onclick events I use onmouseout, ontouchstart , ontouchend etc... and as for root svg element i use the onload event frequently. Ben Frain solution below involves drawing an extra cover object (a rectangle ) to capture the click events ... so I offered up this solution showing getting events on the drawing elements themselves without having to make a transparent cover just to get a click event. Especially helpful when you don't want to draw another element or you want the events specific to existing shape and not a rectangle.

Answer 9

i tried this clean easy method and seems to work in all browsers. Inside the svg file:

<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
 
<!--your graphic-->
 
</a>
</svg>
 

• Mere Development: The following 'xlink' namespace will have to be added to the svg element to make this work: xmlns:xlink="w3.org/1999/xlink"
• ByteMyPixel: None of the other solutions worked for me but this one did, whew, thank you!
• Gwyneth Llewelyn: Although I usually have no qualms about changing an SVG file directly, in my scenario, I use the same SVG for several different links — meaning that theoretically, I'd have to create a different SVG for each. Alternatively, of course, I could add the graphic bit inline in the <svg> tag, but I hate duplicate code (even though the actual SVG I've got is small...)

Answer 10

This is very late, but I was wondering why energee's solution works: specifically, how the <object> element affects its parent elements.

tl;dr You cannot click on an anchor that has an <object> element in it because the click events are being captured by whatever is inside of the <object> element, which then doesn't bubble it back out.

jsfiddle

---

To expand on the symptom described in the original question: not only will an <object> element inside an anchor element cause the anchor to become unclickable, it seems that an <object> element as a child of any element will cause click, mousedown, and mouseup events (possibly touch events too) to not fire on the parent element, (when you are clicking inside the <object>'s bounding rect.)

<span>
 <object type="image/svg+xml" data="https://icons.getbootstrap.com/icons/three-dots.svg">
 </object>
</span>

document
 .querySelector('span')
 .addEventListener('click', console.log) // will not fire

Now, <object> elements behave somewhat "like" <iframe>s, in the sense that they will establish new browsing contexts, including when the content is an <svg> document. In JavaScript, this is manifested through the existence of the HTMLObjectElement.contentDocument and HTMLObjectElement.contentWindow properties.

This means that if you add an event listener to the <svg> element inside the <object>:

document
 .querySelector('object')
 .contentDocument // returns null if cross-origin: the same-origin policy
 .querySelector('svg')
 .addEventListener('click', console.log)

and then click on the image, you will see the events being fired.

Then it becomes clear why the pointer-events: none; solution works:

• Without this style, any MouseEvent that is considered "interactive" (such as click and mousedown, but not mouseenter) is sent to the nested browsing context inside the <object>, which will never bubble out of it.

• With this style, the MouseEvents aren't sent into the <object> in the first place, then the <object>'s parent elements will receive the events as usual.

This should explain the z-index solution as well: as long as you can prevent click events from being sent to the nested document, the clicking should work as expected.

(In my test, the z-index solution will work as long as the parent element is not inline and the <object> is positioned and has a negative z-index)

(Alternatively, you can find a way to bubble the event back up):

let objectElem = document.querySelector('object')
let svgElemt = objectElem.contentDocument.querySelector('svg')
svgElem.addEventListener('click', () => {
 window.postMessage('Take this click event please.')
 // window being the outermost window
})
window.addEventListener('message', console.log)

Answer 11

I was using simply

 <a href="#">
 <img src="../../assets/images/logo.svg" alt="">
 </a>

Which works fine except I was trying to apply a :hover state. What brought me here was when I used

 <a href="#">
 <object data="../../assets/images/logo.svg" type="image/svg+xml" class="logo">
 </object>
 </a>

I lost my link and noticed in DevTools that the link still appeared around the SVG, but the :hover state worked. Utilizing energee's elegant answer, my link worked, but of course I lost the :hover. So it looks like the object tag isn't a great solution for applying a :hover change to an SVG.

I am curious, why would you not use the img tag to display an SVG without anything special added to it, like :hover? Using the img tag also works with the a tag.

Answer 12

Just don't use <object>. Here's a solution that worked for me with <a> and <svg> tags:

<a href="<your-link>" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" 
 height="30"><path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83 
 2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 
 1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3- 
 6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
 </svg>
</a>

• Ege Hurturk: btw I am using tailwind css.

Answer 13

Do it with javascript and add a onClick-attribute to your object-element:

<object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href='http://google.at';">
 <span>Your browser doesn't support SVG images</span>
</object>

• iancoleman: I tried this, both with and without the surrounding <a> tags, and I cannot get this to work. I tried in FF and Chrome on Linux. Which browser did you try this in?
• iancoleman: It would be great if you could try it and confirm that it works so others who read this can be confident of your answer. "It must work" is fine in theory, but for me it must work in practice.
• Chase: I just tried this on Chrome 45 on Windows and it seems to work fine. I added onClick directly to an SVG tag without a wrapping anchor. It would be nice if the downvotes explained why.