<h1>JS Fallback for SVG as &lt;img&gt;</h1>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/91525/svg-ok.svg"
 data-fallback="//s3-us-west-2.amazonaws.com/s.cdpn.io/91525/svg-no.png"
       alt="SVG Support Icon"/>

img {
  display: block;
  width: 248px; height: 248px;
}
function svgasimg() {
  return document.implementation.hasFeature(
    "http://www.w3.org/TR/SVG11/feature#Image", "1.1");
}

if (!svgasimg()){
  var e = document.getElementsByTagName("img");
  if (!e.length){
    e = document.getElementsByTagName("IMG");
  }
  for (var i=0, n=e.length; i<n; i++){
    var img = e[i],
        src = img.getAttribute("src");
    if (src.match(/svgz?$/)) {
      /* URL ends in svg or svgz */
      img.setAttribute("src", 
             img.getAttribute("data-fallback"));
    }
  }    
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.