How to do fallback for svg in css styles?

Question

css

Good morning friends. I have a problem, I don’t know how to properly make a fallback for svg using png, namely, I want to do it in the ::before pseudo-element, background doesn’t work there where you can list icons separated by commas. The result should be something like this:

Maybe there are some other ways to solve this problem?

Answer 1

You can write like this:

.selector::before {
  content: "";
  background: url(fallback.png);
  background: url(background.svg);
}

If the browser does not support svg, it will simply not apply the second rule. You can also install the modernizr
library , which will check if the browser supports svg. If not, this plugin will give the html tag a no-svg class that we can rely on:

.selector::before {
  content: "";
  background: url("background.svg");
}
.no-svg .selector::before {
  content: "";
  background: url("background.png");
}

Here is a great article on svg fallbacks.

Answer 2

I don’t know what fullback is, but what you want is done through use
and then you can style it in css, but svg doesn’t know background because there is fill
information on fill
information on use