SVG for images in browsers with PNG fallback

Question

I\'m looking to use SVG versions of a company logo on a website. At present, all current versions of major browsers (IE, Safari, Chrome, Firefox, Opera) support SVG, so this

Answer 1

The only thing you need is CSS. First you declare the fallback image as a background-image. Then you can use multiple backgrounds to add the SVG.

IE8 and below will ignore the second background-image-declaration, because the lacking support of multiple backgrounds.

By the way, I'm using the img element here, because a logo is content, not layout. Using background-images might appear to be wrong in this context, but I disagree. You get the best of the worlds: SVG logo, fallback for

HTML:

CSS (using multiple background images):

caniuse: multiple backgrounds

• PNG for IE <9, FF <3.6, Opera <10.5
• SVG for all the others supporting SVG
• Android 2.x won't have a PNG or SVG, due to these versions actually supporting multiple backgrounds, but not SVG
• There is only one HTTP request made for browsers supporting SVG

.site-logo > img {
    /* Dimensions of your image need to be set */
    width: 32px;
    height: 32px;

    /* Fallback for 

CSS (using linear gradients):

caniuse: CSS gradients

• PNG for IE <10, FF <3.6, Safari <4.0, Opera <11.1, Opera Mini, Opera Mobile <11.1
• SVG for all the others supporting SVG (if vendor-prefixes are specified)
• Ignoring the old gradient syntax for webkit makes Android 2.x use the PNG fallback

.site-logo > img {
    /* Dimensions of your image need to be set */
    width: 32px;
    height: 32px;

    background: transparent url(logo.png) center center no-repeat;
    background-image: -webkit-linear-gradient(transparent, transparent), url(logo.svg);
    background-image:         linear-gradient(transparent, transparent), url(logo.svg);
}