Почему нет нормальной работы с svg в css?

Question

[pixal]

Всем привет. Очень удобная вещб svg это идеальная технология для иконок, пентаграмм. Но есть беда. Практически все способы вставки svg в html не позволяют менять цвет при помощи css. Кроме как вставить код svg в html. Неужели никак нельзя подключить по ссылке и иметь возможность гибко изменять все?

Comments

[Lynn «Кофеман»]

Потому что технически svg вставленный в тег img это уже другой документ.

Как, например другая страничка вставленная в IFRAME.

CSS не может пересекать границы документа, так что никакие стили твоей страницы не влияют на содержимое страницы в IFRAME и SVG в теге img.

[pixal]

Lynn «Кофеман», и никак это не решить? Просто не очень красиво вставлять в страницу код самого svg

[Виталий Першин]

pixal, Можно вставлять svg как отдельный файл и менять цвет, но я к сожалению не могу сейчас найти пример. Там обращение идет по анкору к айдишнику svg изображения.

Answer 1

[Ankhena]

Есть.

Практически все способы вставки svg в html не позволяют менять цвет при помощи css.

При вставке в разметку вообще нет проблем менять цвет.

fill: red;
stroke: green;

и т.д.
Альтернативный вариант, а разметке задаем в заливку или обводку currentColor, в CSS меняем свойство color.

Ещё один - использование кастомных свойств.

При вставке прямо в CSS
Маски и фильтры.

mask: url(img.svg) no-repeat center / contain;
  background: red;
  
  &:hover {
    background: green;
  }

Один из вариантов - инлайнить SVG прямо в CSS (в кастомные свойства, чтобы не мусорить в селекторах).
Другой вариант - собираем стек из SVG и используем в url в маске.

Собственно, стеки можно использовать где угодно, в отличие от устаревшего спрайта.
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

Comments

[pixal]

Альтернативный вариант, а разметке задаем в заливку или обводку currentColor, в CSS меняем свойство color.

Можно подробнее?

[Ankhena]

pixal,

<svg>
  <circle fill="currentColor">
</svg>

svg {
  color: red;
  
&:hover {
    color: green;
  }
}

Естественно, свойство color наследуется, так что выбирайте селектор как удобно.

[Ankhena]

pixal, ну и ещё один вариант это использование кастомных свойств. Принцип аналогичный.

Answer 2

[leeroyjenkins176]

Работайте с svg как со спрайтом с помощью тега <use>

Comments

[Maksym Sahaidak]

первый раз слышу, это как ? знаю что не давно добавили в react - use. Но как это использовать с SVG ?

[leeroyjenkins176]

Max Sagaidak, svg файл содержит набор спрайтов в виде тега symbol с уникальными id.
После в html мы можем их вывести с помощью тега use
<svg><use href="my-icon-id"></svg>
Таким образом этот способ удовлетворяет все условия автора - компактный html и возможность менять цвет с помощью css

Answer 3

[Maksym Sahaidak]

Можно, тебе нужно почитать про current color in svg.
https://stackoverflow.com/questions/13000682/how-d...

Comments

[pixal]

Так это при вставке в html, а вот как img ничего не даст. И нет типа

[Максим]

pixal, не понял я вопроса, что не получается?приведите пример

[pixal]

Максим, подклучить из файла на страницу svg и сенять стили

Answer 4

[Антон Антон]

Используй сборщик, который автоматически соберет svg sprite из svg из папки и вставит в html. Для статических страниц подходят способы отсюда: https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
Для всяких spa, собираемых vite и webpack также есть плагины.