It easier said than done. Later this evening, I was trying to do just the same for a forum (SVG logo, with fallbacks for IE and older Firefox). I'm (thankfully) not a front-end web developer, but I thought it wouldn't take more than 15 minutes.

I wasted about 4 hours on that thing... The result is here: http://173.242.122.166/irmug/local/http/www.irmug.com/ using these logos: http://173.242.122.166/irmug/logo.svg and http://173.242.122.166/irmug/logo.png

This is what I finally decided to do:

1. CSS (for #logo element):

    background: url(../../../../logo.png) no-repeat center center;
    background: rgba(0,0,0,0) url(../../../../logo.svg) no-repeat center center;
    width: 588px;
    height: 198px;

(borrowed from https://gist.github.com/1565894 - note two backgrounds!)

2. run this stupid script to swap-out logo in Firefox < 4 and IE

    window.onload = function() {
      if (!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) { // IE, Firefox < 4
        var el = document.getElementById('logo');
        if (el.style.setProperty) {
          el.style.setProperty('background-image', 'url("../../../logo.png")', null);
        } else { //IE
          el.style.backgroundImage = 'url("../../../logo.png")';
        }
      } else { // just to make sure
        var el = document.getElementById('logo');
        if (el.style.setProperty)
          el.style.setProperty('background-image', 'url("../../../logo.svg")', null);
      }
    }

It works perfectly on all browsers now, except Opera 11 (when you zoom in, it's all messed up). I can't imagine what the problem could be.

If there is a better way of doing it (without using huge libraries), I'd be very thankful if you let me know.