Reliably detecting

Question

I\'m currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in th

Answer 1

A good discussion/comparison of methods is here: http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

Based on that page, I wound up using this:

svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")

Answer 2

For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:

// From the Modernizr source
var inlineSVG = (function() {
  var div = document.createElement('div');
  div.innerHTML = '<svg/>';
  return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();

if( inlineSVG ){
  alert( 'inline SVG supported');
}

So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.

Answer 3

I've been meaning to write a blog post about this, but here's a snippet that should work:

function SVGSupported() {
    var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
    var img = document.createElement('img')
    img.setAttribute('src',testImg);

    return img.complete; 
}

Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.

I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/

It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js

Answer 4

This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.

Answer 5

Use <object>-Tags for displaying SVG. See http://caniuse.com/svg-img and http://www.w3schools.com/svg/svg_inhtml.asp

Firefox 3.x can also display SVG images, just no embedded SVGs. I’m not sure about those on the other browsers neither. FF4 will also allow embedded SVGs.

With the <object>-Tag you can also include alternative PNG-displaying of images, in case the browser does not support displaying SVG.