Inspiring

Answered

anchor encloses object - link does not work

Forum|Forum|5 years ago
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.

Nancy OShea

Community Expert

"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

Parts4ArtsAuthor

Inspiring

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

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

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

Parts4ArtsAuthor

Inspiring

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

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!

Parts4ArtsAuthor

Inspiring

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?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded