<h1>Fallback Inline SVG using &lt;image&gt;, v2</h1>
<svg viewBox="-20 -20 40 40">
  <a class="hide-on-fallback">
    <title>SVG OK</title>
    <circle fill="limegreen" r="19" />
    <path stroke="forestgreen" fill="none" stroke-width="6"
          d="M-12,3 L-3,10 11,-12" />
    <text dy="0.35em" text-anchor="middle" font-weight="bold"
          font-size="18px" font-family="sans-serif"
          fill="indigo">SVG</text>
  </a>
  <image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/svg-no.png"
         xlink:href=""/>
</svg>
svg, image {
  display: block;
  width: 248px; height: 248px;
}
.hide-on-fallback {
  display: block;
  position: fixed;
  left: -100%;
  height: 0; width: 0;
  overflow: hidden;
}

External CSS

  1. https://codepen.io/AmeliaBR/pen/607cb7712555f8d347794ffd3835672d.css

External JavaScript

This Pen doesn't use any external JavaScript resources.