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.
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.
It was originally an <a> tag so I didn't want to change that, and I think img tag didn't work very well with SVG and I had to use <embed>, which was another level of complexity.
But I'm by no means a web (front end) developer so I'm sure there are better ways to do this; I just didn't feel adventurous enough to spend more than 4 hours on stupid compatibility issues on older browsers :-)
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):
(borrowed from https://gist.github.com/1565894 - note two backgrounds!)2. run this stupid script to swap-out logo in Firefox < 4 and IE
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.