Как задать цвет svg через css

Как менять цвет svg-sprite?

Собственно, как составить каскад в css, чтобы поменять цвет svg в спрайте? Перепробовал много разных вариантов, в итоге — ничего не получилось. Если просто вставить код svg в html — таких проблем не возникает, обращаюсь к path и всё хорошо работает, а тут логику понять не получается.

use.ewq svg path

На всякий случай оставляю пример приведённый в codepen https://codepen.io/myrumpel/pen/PoyEvox
Отслеживать
Ivan Malovichko
задан 6 мая в 9:24
Ivan Malovichko Ivan Malovichko
41 7 7 бронзовых знаков

Если вы с codeopen скопировали, то как-то не правильно скопировали, я скопировал и нормально цвет меняется

6 мая в 10:00

Евгений, я нашёл ответ на вопрос несколько минут назад, сейчас сижу и пишу ответ. Сидел и экспериментировал в codepen, там всё правильно) Но спасибо за ответ)

6 мая в 10:05

Да тут прикол в том, чтобы не засорять html верхняя часть заполняется в отдельном файле, который подключается к основному и вы выводите svg картинку сокращённым видом где — xlink:href=’#svg-geo’ указывает на id нужного svg, который вы хотите вывести.

6 мая в 10:08

@ЕвгенийЛи, оно у меня так в проекте и реализовано. Вопрос был в смене цвета у svg, которые тягаются из спрайта. Ответ расписал ниже)

6 мая в 10:18

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Со стилями всё стандартно и просто, как в учебниках. Одно не пойму — почему, для создания простейших фигур, столько лишнего в SVG ? Такое пишется вручную, безо всяких редакторов:

svg < display: inline-block; width: 150px; >use.test1 < fill: red; >use.test2 < fill: purple; >use.test3

Отслеживать
ответ дан 6 мая в 11:03
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

Комментарии были перемещены в чат; пожалуйста, не продолжайте дискуссию здесь. Прежде чем разместить комментарий ниже этого, пожалуйста, ознакомьтесь с назначением комментариев. Комментарии, которые не запрашивают уточнения или не предлагают улучшения, скорее всего должны быть ответами, размещены на Stack Overflow на русском Meta или написаны в Чат Stack Overflow на русском. Комментарии, продолжающие дискуссию, могут быть удалены.

6 мая в 11:54

Ребятки, час в codepen не прошёл зря, поэтому делюсь с теми, кто не знает ответа на вопрос:

use.test1 < fill: red >use.test2 < fill: purple >use.test3

Во-первых, удаляем из кода svg-sprite`а подобные строки:

style="display: none;" fill="#F24957" fill="none" 

Так как мы используем тег use, добавляем ему класс и обращаемся к конкретному svg таким образом:

use.ewq

Здесь мы обращаемся к тегу use, у которого есть класс test1 и сразу (без path) прописываем fill, либо stroke (это зависит от того, какая у вас svg (fill — заливка, stroke — обводка))

Таким образом мы можем тягать одну и ту же svg картинку в разные места и стилизовать её по-разному.

Отслеживать
2,558 1 1 золотой знак 5 5 серебряных знаков 22 22 бронзовых знака
ответ дан 6 мая в 10:14
Ivan Malovichko Ivan Malovichko
41 7 7 бронзовых знаков

А у меня вопрос есть, проще таким образом подтягивать svg или прописывать через , а потом с помощью JS конвертировать его в svg?

6 мая в 10:23

@ЕвгенийЛи, предложенный Вами способ я не пробовал, но если подумать, то этот вариант (спрайт) будет удобнее и функциональнее: 1) Насколько мне известно, то если подключать svg через img, то эти изображения меньше поддаются изменениям; 2) Здесь плагин собирает все svg в один отдельный файл и мы сниппетом подключаем это изображение, к которому можем обращаться напрямую, помимо этого, svg из спрайтов можно анимировать. 3) Так же, насколько мне известно, файл спрайта кешируется, а уже из него тягаются все svg. 4) И после работы с svg, они не подвергаются никакой дальнейшей обработки.

6 мая в 10:32

Хорошие преимущества. Я пользовался заполнением через img и плюс такого подхода был в том, что контент-менеджер без помощи разработчика сайта мог через админку загружать svg иконки любые и они автоматом преобразовывались в svg и приобретали тот цвет и размер, который был прописан для них в CSS. Дело было в том, что было меню в котором к каждому разделу прилагалась иконка этого раздела и эти разделы могли меняться через админку, и к тому же у этого сайта работали 2 темы, зимняя и летняя, когда переключаешь с зелёной на синюю, все цвета всех иконок на сайте должны были меняться.

6 мая в 10:43

Вообще подходов к загрузке svg очень много я заметил и каждый пользуется тем, что удобней или в зависимости от поставленной цели))

Как изменить цвет иконки SVG с помощью CSS?

На странице есть иконки в формате SVG . Сами иконки нарисованы в черном цвете.
Как с помощью CSS покрасить их их в красный цвет?

Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 6 янв 2019 в 7:31
ObehanProger ObehanProger
1,400 2 2 золотых знака 14 14 серебряных знаков 34 34 бронзовых знака
посмотрите тут: css-tricks.com/almanac/properties/f/fill
6 янв 2019 в 7:42

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

В данном контексте, когда svg у вас лежит отдельно в виде файла, через CSS ничего сделать нельзя. Нужно вставить svg в html текстом, тогда появится возможность использовать в css свойство fill к тегу svg и его вложенным тегам.

Отслеживать
ответ дан 6 янв 2019 в 7:49
Andrei Fedorov Andrei Fedorov
5,791 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак

Если SVG иконка добавлена отдельным файлом с помощью тега , то это тоже самое, как добавить растровое изображение, к которому невозможно применить изменение цвета с помощью CSS правил. Возможно только поменять цвет background .

Но есть способ сделать изменение цвета иконки с помощью фильтров CSS или SVG

Допустим добавлена иконка ключа с помощью :

С помощью различных css фильтров меняем цвет иконок:

.container < display:inline-block; width:25%; height:25%; padding:1.5em; background: rgb(123,215,193); background: linear-gradient(90deg, rgba(123,215,193,1) 4%, rgba(225,233,148,1) 97%); >.key < height: 3em; width: 3em; >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert

Пример, если svg файл добавлен с помощью background-image:

.key < background-image: url("https://twemoji.maxcdn.com/svg/1f506.svg"); display: inline-block; background-repeat: no-repeat; background-position: center center; height: 3em; width: 3em; margin: 0 0.15em 0 0.3em; vertical-align: -0.3em; background-size: 3em 3em; >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert

Вариант с изменением цвета при наведении

.container < display: -webkit-flex; display: flex; width:35%; height:35%; >.key < height: 3em; width: 3em; padding: 1em; transition: 0.8s; >:hover.key < height: 4em; width: 4em; -webkit-filter: hue-rotate(320deg); filter: hue-rotate(320deg); >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert

Как правильно менять цвет svg-шкам через css?

Сколько раз не получалось уже. Я где-то туплю, господа.
Есть страничка. Svg вставлена через чтобы не дублировать код. Дэфолтный цвет задан в коде самой svg через fill=»» . Вопрос: а можно ли мне изменить его через CSS? Вот сейчас хочу по hover-у менять цвет svg, например.

Если вдруг таким способом это делать нельзя, то буду благодарен за любые варианты, кроме «вставить в HTML 18 раз одну и ту же svg» 🙂

• Вопрос задан более трёх лет назад
• 1194 просмотра

Как изменить цвет background если подключен svg?

Чтобы изменить цвет у подключаемого SVG файла, можно использовать mask-image свойство CSS.

Данное свойство не имеет поддержки в IE, но имеет 91% поддержку с префиксом и 6% без.

Поэтому на текущий момент использовать строго с префиксом.

Подробнее про поддержку можно узнать здесь

body < display: flex; height: 100vh; align-items: center; justify-content: center; >i.icon < width: 50px; height: 50px; display: block; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: gray; margin: 0 10px; >i.icon.icon-like < -webkit-mask-image: url("https://image.flaticon.com/icons/svg/25/25423.svg"); >i.icon.color-black < background-color: black; >i.icon.color-red < background-color: red; >i.icon.color-green < background-color: green; >i.icon.color-blue