• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

anchor encloses object - link does not work

Engaged ,
Jun 16, 2020 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?

TOPICS
Code , How to

Views

504

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
community guidelines

correct answers 1 Correct answer

Engaged , Jun 18, 2020 Jun 18, 2020

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. 

Votes

Translate

Translate
Community Expert ,
Jun 16, 2020 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.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Engaged ,
Jun 16, 2020 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

 

Votes

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
community guidelines
Community Expert ,
Jun 16, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Engaged ,
Jun 17, 2020 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.

Votes

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
community guidelines
Community Expert ,
Jun 17, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Engaged ,
Jun 17, 2020 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.

Votes

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
community guidelines
Community Expert ,
Jun 17, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Engaged ,
Jun 18, 2020 Jun 18, 2020

Copy link to clipboard

Copied

Thanks for the info. 🙂 

Votes

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
community guidelines
Engaged ,
Jun 18, 2020 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. 

Votes

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
community guidelines
Community Expert ,
Jun 19, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Engaged ,
Jun 20, 2020 Jun 20, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines