Last Updated: February 25, 2016
· creativeaura

SVG with PNG fallback for IE8

All browsers that support SVG background images also supports multiple background images.


.module {
    background: url('logo.png');
    background: none, url('logo.svg');


$public_path: ./;

@mixin vector-bg-with-fallback($name) {
    background-image: url('#{$public_path}images/#{$name}.png');
    background-image: none, url('#{$public_path}images/#{$name}.svg');

Sourec : Ben Schwarz.

1 Response
Add your response

Android 2.3 and below didn’t support SVG but did support multiple-background, this would probably reset the first PNG background-image definition to none.

over 1 year ago ·