best way to catch browsers without SVG?

[Nelson Minar]

I'm about to launch a data visualization site that uses D3 and Polymaps and, consequently, a whole lot of SVG. What's the recommended way to catch users who don't have SVG support in their browsers and give them something to look at? All I need is a redirect or a link to a page saying "get a new browser".

It'd probably get 95% of the folks if I just sniff the browser and see if they're running IE 6, 7, or 8.  But it'd be cooler to have some automatic fallback or feature detection.

[Mike Bostock]

Use Modernizr by Paul Irish et al.:

http://www.modernizr.com/

Then, you can do something like this:

<style type="text/css"> .svg .static { display: none; } </style>
<img src="fail.png" class="static">
<svg:svg …

Mike

[Nelson Minar]

On Fri, Jun 3, 2011 at 2:59 PM, Mike Bostock <mbos...@cs.stanford.edu> wrote:

Use Modernizr by Paul Irish et al.: http://www.modernizr.com/

Thanks for the advice. I ended up lifting the SVG test out of modernizr rather than adopting his whole framework. The core of the modernizr test is "document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect)". There's an alternate approach using DOMImplementation.hasFeature, see http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser. The Modernizr test works in all the browsers I tried it on.

Here's my entire "Test for SVG and complain if not available" function, complete with hacky innerHtml usage. Ironically the close box causes an error when clicked in IE8 because D3 assumes addEventListener() is available. I care about ][ that much.

// Display a warning for browsers without SVG

var svgWarningHtml = '\

<div id="svgWarning"\

     style="z-index: 1; width: 300px; padding: 8px 8px 8px 8px;\

     position: fixed; top: 200px; left: 50%; margin-left: -150px;\

     background: #ffd; border: solid 4px #b00; font-size: 14pt;">\

  <div id="warnclose"\

       style="position: absolute; right: 12px; color: white; font-weight: bold; cursor: default;"\

  >X</div>\

  <div id="warntitle"\

       style="font-weight: bold; background: #b00; color: white; text-align: center;"\

  >WARNING</div>\

  Your browser does not support SVG, a required feature for this site.\

  Please see <A href="about.html#browser">about browser compatibility</a>.</div>\

</div>';

function svgWarning() {

    // SVG test taken from Modernizr 2.0

    if (!!document.createElementNS &&

        !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect)

        return;

    // No SVG, do something about it.

    d3.select("body").append("div").html(svgWarningHtml);

    d3.select("#warnclose").on("click", function() {

        d3.select("#svgWarning").style("display", "none") });

}

[eudaimos]

This is cool, but I think it would be even better assuming you're using Node.js to produce the same d3 visualization without transitions and then send it as an image to the browser via the btoa base64 encoding.

Would that work?

I'll try when I get a chance, but not sure when that'll be.

[Nelson Minar]

On Fri, Dec 30, 2011 at 4:12 PM, eudaimos <je...@hwgray.com> wrote:

This is cool, but I think it would be even better assuming you're using Node.js to produce the same d3 visualization without transitions and then send it as an image to the browser via the btoa base64 encoding.

Well sure, but that's a lot of work. See discussions in this group before about server side rendering. Node's not enough, you need an SVG implementation rendering to pixels. And of course you won't have any interactive functions displaying a static image.