SVG Images & Fallbacks

SVG images are in colour and fallbacks are grey.

Image Code
Firefox Logo <img src="firefox-logo.svg">
Firefox Logo Firefox logo in SVG, authored by Jon Hicks, made in Adobe Illustrator (file format cleaned up and slightly modified by Doug Schepers) <svg>
...
<image src="firefox-logo.png" />
</svg>
<svg>
<image xlink:href="firefox-logo.svg" src="firefox-logo.png" />
</svg>
Firefox Logo <img src="firefox-logo.png" srcset="firefox-logo.svg">
Firefox Logo <picture>
<source srcset="firefox-logo.svg" type="image/svg+xml">
<img src="firefox-logo.png">
</picture>
Firefox Logo <object type="image/svg+xml" data="firefox-logo.svg">
<img src="firefox-logo.png">
</object>
<iframe src="firefox-logo.svg" frameborder="0">
<img src="firefox-logo.png">
</iframe>
Firefox Logo <img src="firefox-logo.svg" onerror="this.src='firefox-logo.png';this.onerror=null;">
Firefox Logo <img src="firefox-logo.svg">

<script>
if (!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
  var im = document.getElementsByTagName("img");
  for (var i = 0, l = im.length; i < l; i++) {
    im[i].src = im[i].getAttribute('src').replace(/\.svg$/, '.png');
  }
}
</script>
Firefox Logo <img src="firefox-logo.png">

<script>
if (
  document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1") &&
  "querySelectorAll" in document
) {
  var im = document.querySelectorAll('img[src$=".png"]');
  for (var i = 0, l = im.length; i < l; i++) {
    im[i].src = im[i].getAttribute('src').replace(/\.png$/, '.svg');
  }
}
</script>

Image sources:
http://www.codedread.com/images/firefox-logo.svg
https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/

Page by:
Walter Ebert