Как правильно делать fallback для svg в css стилях?

Question

[Vetelek]

Доброе утро друзья. У меня проблема, не знаю как правильно сделать fallback для svg с помощью png, а именно хочу сделать это в псевдоэлементе ::before, там не работает background где можно через запятую перечислить иконки. В результате должен получиться такой элемент:

Может есть какие-то другие пути для решения данной проблемы?

Comments

[Александр]

Забить. Динозавров, которые работают с браузерами, не поддерживающими svg, от силы 3%.

Answer 1

[Сергей]

Можно написать так:

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

Если браузер не поддерживает svg, он просто не применит второе правило.

Также можно установить библиотеку modernizr, которая будет проверять, поддерживает ли браузер svg. Если не поддерживает, данный плагин присвоит тегу html класс no-svg, на который мы можем опираться:

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

Вот отличная статья по фолбекам svg.

Comments

[Vetelek]

A как потестить скрипты если браузер поддерживает svg? Можно ли как-то отключить поддержку svg в браузере?

[Сергей]

Если ты хочешь проверить, как будут работать стили, ты можешь сам навесить класс no-svg корневому тегу. Копаться где-то в недрах браузера и отключать поддержку svg, чтобы проверить, как будет отрабатывать библиотека modernizr, нецелесообразно.

Answer 2

[Максим]

что такое fullback не знаю но то что Вы хотите делается через use
и потом уже в css можно стилизовать , но svg не знает background так как там fill
информация по fill
информация по use

Comments

[Vetelek]

Нет нет. Имею в виду, что если не пидгружаеться svg, вместо него чтобы пидгружався png.
в HTML коде это делается так:

<object type="image/svg+xml" data="img.svg">
<img src="image.png" alt="">
</object>

А как это сделать с помощью css?

[Максим]

Vetelek, вместо svg грузить png ? а для чего это ?

[Vetelek]

Максим Ленский, если не поддерживается браузером и тд.

[Максим]

Vetelek, обычно вместо это пишут текст ....а заменить не знаю как .. проверить то не где