How to make a background of an element in SVG in a decent way?

Question

I develop websites that have the company logo on SVG, but wanted to know how to test easily or force to replace the SVG when the browser does not support. So I could have done the logo on PNG to replace.

I usually put SGV as the background of an element with block visibility and make an alternate CSS for IE8 and smaller, I’m doing the right thing?

Answer 1

Change the Markup is an option

^{I’m the reply separately because they are two different solutions with different implications and in a way this is an extensive response that lacks its independence.}

By amending the Markup that you are currently using, you can handle the SVG support issue without having to increment your stylesheet or script file with lines of code that will only serve a small percentage of visitors.

SVG and tag Tricks

The solution presented is based on the fact that browsers make the tag image a pseudonym for the tag img, as explained in Having fun with <image> ^(English) by Jake Archibald where we can read:

• Firefox aliases 'image' to 'img' at parse-time
• Chrome & Safari alias 'image' to 'img' at element-Creation time
• IE aliases 'image' to 'img' throughout the Runtime

That (+/-) translated:

• Firefox converts image for img when parsing
• Chrome & Safari convert image for img when creating the element
• IE converts image for img in the course of processing

Therefore, the idea is to make use of the tag svg with a image inside where we indicate the two files to be used, the SVG if supported and the fallback image in case it is needed.

<svg width="400" height="400">
    <image xlink:href="http://www.quatrocubos.com.br/img/qq.svg" src="http://www.quatrocubos.com.br/img/qq.png" width="400" height="400"/>
</svg>

The question here is whether or not you can host the Markup which is obviously necessary to implement this solution.

Assuming yes, this is how things would turn out for the same effect:

Example in Jsfiddle

HTML

<div class="bg">
    <div class="logo">
        <svg width="500" height="500">
            <image xlink:href="http://www.quatrocubos.com.br/img/qq.svg" src="http://www.quatrocubos.com.br/img/qq.png" width="500" height="500"/>
        </svg>
    </div>
</div>

CSS

.logo {
    display:block;
    width:500px;
    height:500px;
    margin:40px;
}
.bg{
    background-color:#333;
}

Upshot

The result after adding Markup to SVG and after removing CSS now unnecessary, is as seen below or in Jsfiddle:

This gives us the same visual environment that was initially achieved primarily using CSS definitions.

Note:

As we can see in SVG Fallbacks by Chris Coyier ^(English) which also talks about the links already present in this answer and the technique suggested here:

In Internet Explorer we can see that both images are requested from the server. However, only one can be downloaded, the unnecessary image comes with 0KB, which tells us that the browser at some point cancels the request because it understands that after all it does not need the image.

Answer 2

If Javascript / jQuery is an option

You can ask the browser whether or not it supports SVG and by responding act accordingly:

Example in Jsfiddle

/**
 * Detecta suporte ao SVG
 */
function suportas_SVG() {
    return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect;
}

// Se não tem suporte ...
if (!suportas_SVG())
    $('.logo').css({
      "background-image" : "url(http://www.quatrocubos.com.br/img/qq.png)"
    });

^{The code in the suggested function is in the source code of the modernize (English) which would be my recommendation if you have to do many such checks for various types of support.}

Answer 3

If you make a hack css like this:

/* hack css para navegadores que não suportam svg */
background: url(http://www.quatrocubos.com.br/img/qq.png) top center no-repeat;
background: url(http://www.quatrocubos.com.br/img/qq.svg) top center no-repeat;

That’s a decent way for me. (at least inevitable).

EDIT 1

There are many ways, one that might suit what you want is this:

background-image: url(http://www.quatrocubos.com.br/img/qq.svg); /* Qualquer Browser */
background-image /*\**/: url(http://www.quatrocubos.com.br/img/qq.png)\9; /* Internet Explorer 8 */
*background-image: url(http://www.quatrocubos.com.br/img/qq.png); /* Internet Explorer 6 e 7 */
_background-image: url(http://www.quatrocubos.com.br/img/qq.png); /* Internet Explorer 6 */

Note: you will not be covering all browsers, you will only be covering the Ies.