Last active
August 29, 2015 14:08
-
-
Save davidensinger/7fe26619a133bebeaea6 to your computer and use it in GitHub Desktop.
Fallback for SVG in CSS Backgrounds
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.