What's the correct and right way of implementing this code?

My Code: https://jsfiddle.net/p2Lnf4tg/24/

What’s the correct way of doing this, I saw these codes, but which one is right?

I just noticed this. Codes: 1, 4 and 5 don’t let you highlight the image with your mouse.

They are both set up differently, the codes are. Is there a right way or wrong way, and which is the correct way?

There are some many different ways to do this code I’m confused about which way is right.

If you were implementing it, which way would you go with?

Code 1<br>
<svg width="266" height="266">
  <image xlink:href="https://cdn.pbrd.co/images/1Q0l5DIs.svg+xml" src="http://i.imgur.com/om17nAf.png" width="266" height="266" />
</svg>

<br>
<br> Code 2<br>
<img src="https://cdn.pbrd.co/images/1Q0l5DIs.svg+xml" width="266" height="266" onerror="this.onerror=null; this.src='http://i.imgur.com/om17nAf.png'">

<br>
<br>
<br> Code 3<br>
<img src="invalid_link" width="266" height="266"
 onerror="this.onerror=null;this.src='https://cdn.pbrd.co/images/1Q0l5DIs.svg+xml';">

<br>
<br> Code 4<br>
<object data="https://cdn.pbrd.co/images/1Q0l5DIs.svg+xml" width="266" height="266" type="image/svg+xml">
  <img src="http://i.imgur.com/om17nAf.png" />
</object>

<br>
<br> Code 5<br>
<embed id="E" src="https://cdn.pbrd.co/images/1Q0l5DIs.svg+xml" width="266" height="266"/>

<br>
<br> Code 6<br>
<img src="https://cdn.pbrd.co/images/1Q0l5DIs.svg+xml" width="266" height="266"/>

I think they are all correct and can be used to suit different applications although I prefer not to use Objects or Embeds.

I tried numerous options and now use the following to link a SVG image because it validates without errors using w3.org Validation

I also use the following DIV background CSS style:

.logo {/* SVG: width:155px; height:200px;*/ 
       width:100px; height:129px; 
       margin: -3.5em auto 0;
       opacity:0.1; 
       background: url(http://john-betong.tk/utils/img/ciLogo.svg);
       background-size: contain;}
.logo:hover{opacity:0.15;}
.logoh1{margin:-70px auto 1.42em; z-index:1;}

If you’re just placing an image on your page, I’d use the <img> element, unless there’s a compelling reason to use a different method.

1 Like

Please define “this”.
I’m guessing it is to display an SVG with a PNG fall-back.
Is that it?

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.