Вот встретил интересное решение, принцип такой, если браузер понимает фон-градиент, значит и SVG понимает, ели не понимает, тогда видит только PNG картинку на фоне, а SVG не видит.
.uxa-logo {
/*Renders a png background image*/
background: transparent url(../img/uber-architects-logo.png) center center no-repeat;
/*Modern browser supporting linear gradients will render an svg over the png*/
background-image: -webkit-linear-gradient(transparent, transparent), url(../img/uber-architects-logo.svg);
background-image: -moz-linear-gradient(transparent, transparent), url(../img/uber-architects-logo.svg);
background-image: linear-gradient(transparent, transparent), url(../img/uber-architects-logo.svg);
background-size: 100% 100%;
height: 50px;
width: 50px;
}
P.S.> Зачем SVG ? - лично я использую как графику для дисплеев типа ретина, PNG + SVG более компактное решение чем PNG + PNG (144 dpi)...
