@Vetelek

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

Доброе утро друзья. У меня проблема, не знаю как правильно сделать fallback для svg с помощью png, а именно хочу сделать это в псевдоэлементе ::before, там не работает background где можно через запятую перечислить иконки. В результате должен получиться такой элемент:
5b012b579173e633693946.png
Может есть какие-то другие пути для решения данной проблемы?
  • Вопрос задан
  • 394 просмотра
Пригласить эксперта
Ответы на вопрос 2
@SergeiB
Можно написать так:
.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.
Ответ написан
LenovoId
@LenovoId Куратор тега SVG
I want, women not to get sick
что такое fullback не знаю но то что Вы хотите делается через use
и потом уже в css можно стилизовать , но svg не знает background так как там fill
информация по fill
информация по use
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы