What's the correct and right way of implementing an embeddable svg? [on hold]

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

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

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

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> 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"/>