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

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