Conditionally changing mime type using jQuery and Modernizr

Question

<object type="image/svg+xml" data="/images/ampersand.svg"></object>
<object type="image/png" data="/images/ampersand.png"></object>

Basically, using jQuery, I want to change the .SVG one to the .PNG one, for browsers with no svg support (I'll use modenizr to detect that).

I've tried a bunch of different ways with no joy.

Any help would be appreciated.

Answer 1

Today I learned about this (IMHO truly awesome) HTML only solution. Works perfectly to give a fallback in IE 6:

<object data="/images/ampersand.svg">
  <img src="/images/ampersand.png">
</object>

Answer 2

Try

$(document).ready(function () {
    function supportsSvg() {
        return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0");
    }
    if (!supportsSvg()) {
        $('object[type="image/svg+xml"]').prop('type', 'image/png').prop('data', function (_, old) {
            return old.replace('.svg', '.png');
        });
    }
});

---

Wrap code in DOM ready

Read

http://learn.jquery.com/using-jquery-core/document-ready/

http://api.jquery.com/ready/