Fallback for SVG in CSS Backgrounds

fallback-for-svgasimg.scss

// here we assume support for SVG
.my-background-class {
  background-image: url('my-icon.svg');
  
  // but if there’s no support, we use the PNG
  .no-svgasimg & {
    background-image: url('my-icon.png');
  }
}

// alternatively, we could use the SVG, but only when there’s support for it
.my-background-class {
  background-image: url('my-icon.png');
  
  .svgasimg & {
    background-image: url('my-icon.svg');
  }
}

This assumes that you’re using Modernizr to test for SVG as an Image support.

One downside to this approach is that some browsers download both assets, which is why some people prefer to base64 encode their assets in order to save a request (although note that the data for both images still gets downloaded). That said, it’s lately been discovered that you may not want or need to base64 encode your SVGs.