CSS: SVG Images

css-svg-images

<!-- inline SVG with inline fallback -->
<object data="image.svg" type="image/svg+xml">
    <img src="image.png" />
</object>


<!-- inline SVG with CSS fallback using Modernizr -->
<object data="image.svg" type="image/svg+xml" class="svg">
    SVG Image <!-- CSS fallback image -->
</object>

.no-svg .svg {
    background-image: url(image.png);
    width: 100px;
    height: 100px;
}


<!-- CSS SVG with CSS fallback -->
.svg {
    background: url(fallback.png);
    background-image: url(image.svg), none;
}


<!-- CSS SVG with CSS fallback using Modernizr -->
.svg {
    background: url(image.svg) no-repeat;
    background-size: contain;
}

.no-svg .svg {
    background-image: url(image.png);
}