Highlighted

anchor encloses object - link does not work

Explorer ,
Jun 16, 2020

Copy link to clipboard

Copied

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?

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. 

Topics

Code, How to

Views

256

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

anchor encloses object - link does not work

Explorer ,
Jun 16, 2020

Copy link to clipboard

Copied

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?

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. 

Topics

Code, How to

Views

257

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jun 16, 2020

Copy link to clipboard

Copied

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

 

Perhaps the problem lies elsewhere in your code.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jun 16, 2020

Copy link to clipboard

Copied

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?

 

screen.png

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 16, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jun 17, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 17, 2020

Copy link to clipboard

Copied

"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-di...

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jun 17, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 17, 2020

Copy link to clipboard

Copied

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

image.png

 

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

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jun 18, 2020

Copy link to clipboard

Copied

Thanks for the info. 🙂 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jun 18, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 19, 2020

Copy link to clipboard

Copied

Replacing <object> with <picture> just creates a whole other set of problems as you can see from the support chart below.

 

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

 

Can I Use <picture> elementCan I Use <picture> element

 

At any rate, good luck with your poject.

 

 

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jun 20, 2020

Copy link to clipboard

Copied

Thanks for your help. Have a good time. Case is closed. 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...