Skip to main content
Parts4Arts
Inspiring
June 16, 2020
Answered

anchor encloses object - link does not work

  • June 16, 2020
  • 3 replies
  • 786 views

I have a svg, a logo, and I want it to link to the startpage of a website

 

I have found that the link does not work:

 

<a href="http://www.MyWebsite.tld" target="_blank" title="Link zu Homepage">
<object type="image/svg+xml" data="logo.svg">
<img src="logo.png" alt="Logo as png" />
</object>
</a>

 

What else is there to do besides adding a link to the SVG graphic itself?

This topic has been closed for replies.
Correct answer Parts4Arts

Thanks for the info. 🙂 


Hello again, 

 

I found a solution:

 

<a href="http://website.tld" target="_top" title="go to homepage">
	<picture>
	<source type="image/svg+xml" data="logo.svg">
	<img src="logo.png" alt="Logo" class="logo-png">
	</picture>
</a>

 

For IE6 and other I had to add a small Javascript to declare <picture>, like this:

document.createElement("picture");

 

Now, I can see the logo on all browsers even the old ones and I can click on the svg.

 

Have a good weekend.

J. 

3 replies

Nancy OShea
Community Expert
Community Expert
June 17, 2020

"I don't have a fallback for old browsers like IE 6, so no logo is seen there. I'm afraid this is unacceptable."

IE6??  You can't be serious!

 

MS disowned pre-IE11 browsers in early 2016.  Don't waste your time worrying about dead browsers.  If your site breaks in IE10 or earlier, let it break and force users to look for safer browser alternatives.

https://www.thequint.com/tech-and-auto/tech-news/watch-out-internet-explorer-users-microsoft-just-disowned-you

 

Nancy O'Shea— Product User & Community Expert
Parts4Arts
Inspiring
June 17, 2020

That's not my style. There are enough poor people who still have to work with Windows XP. I don't think it's right that the industry forces you to buy and update more and more.

Nevertheless, it is a mistake - in my eyes - if the anchor cannot work with object.

Nancy OShea
Community Expert
Community Expert
June 17, 2020

I think you're wasting your time on insignificant minutia.  To illustrate my point, see the IE Market Share as of last month.

 

If it bothers you so much, use a GIF or JPG image inside a pre-IE11 conditional comment. 

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Community Expert
June 16, 2020

I export my SVG from Illustrator or Inkscape as SVG code.  I  prefer not to use PNG and <object> tag if I can avoid them.

Refer to the browser support and known issues chart on Can I Use SVG.

https://caniuse.com/#feat=svg

 

<a href="https://example.com"><img class="img-fluid" src="folder/filename.svg" alt="logo" style="height:75%; width:75%"></a>

 

Nancy O'Shea— Product User & Community Expert
Parts4Arts
Inspiring
June 17, 2020

Hello, Nancy,
thanks for the tip. But with only <img> I don't have a fallback for old browsers like IE 6, so no logo is seen there. I'm afraid this is unacceptable.
I have a solution that I put a hyperlink in the SVG, but that's double work.

BenPleysier
Community Expert
Community Expert
June 16, 2020

With what you have shown, there is no reason why the link should not work.

 

Perhaps the problem lies elsewhere in your code.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Parts4Arts
Inspiring
June 16, 2020

Yes, it should work, but with <object> it does not work. In macOS 10.14.6 it does not work with a browser (see red dots) and under Windows 10 a small, lower area is clickable. On safari I saw that the anchor does not cover the whole <object>. Also a change with z-index in the CSS does not help. What can I do?