Как поменять цвет svg в css

Как изменить цвет SVG в CSS

Для изменения цвета SVG-изображения с использованием CSS вы можете воспользоваться свойством fill . Вот несколько способов, которые могут быть полезными:

1. Прямое присвоение цвета: Вы можете указать конкретный цвет, присвоив его свойству fill элемента SVG. Например:

В этом примере цвет заполнения SVG-изображения будет установлен на красный.

1. Использование классов: Вы также можете определить класс в CSS и применить его к элементу SVG, чтобы изменить его цвет. Например:

Теперь все элементы SVG с классом «red» будут иметь красный цвет заполнения.

1. Использование псевдоклассов: Вы можете использовать псевдоклассы, такие как :hover или :active , чтобы изменить цвет SVG при определенных действиях пользователя. Например:

svg:hover

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

1. Использование инлайновых стилей: Вы можете добавить атрибут style к элементу SVG и задать значение свойства fill непосредственно в HTML-коде. Например:

Таким образом, цвет заполнения SVG-изображения будет зеленым.

Это лишь некоторые примеры способов изменения цвета SVG с использованием CSS. В зависимости от вашего конкретного случая и структуры вашего документа, возможно, потребуется применить разные подходы.

Сайт, на котором вы сможете найти нужную информацию. Мы постарались создать мини-гугл. Собрать на одном ресурсе всю полезную информацию. Мы можете добавлять материал на сайт.

Как поменять цвет svg?

Было бы лучше, если бы вы приложили код файла этой иконки, чтобы на Вашем примере можно было показать решение.

но что делать, если мне нужна она белого цвета

Открыть svg-файл с помощью графического редактора или редактора кода и изменить цвет

Можно как то изменить цвет ?

Можно. В основном, цвет SVG-элементов задаётся через атрибут/свойство «fill» , иногда через атрибут/свойство «stroke». В зависимости от типа фигуры.

Повторюсь, что если приложите код файла иконки, смогу показать решение на Вашем примере.

Update
Вот Вам код svg-файла с белым цветом значка

А вот он же, но закодированный в Base64 (в котором Вы предоставили пример)

data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=

Как изменить цвет SVG – примеры C#

Aspose.SVG for .NET API позволяет редактировать документ SVG и вносить изменения в его содержимое. Использование цвета – важная часть создания SVG. Вы можете раскрасить фигуры SVG, линии, пути, текст. На примерах C# мы рассмотрим способы применения цветов в файлах SVG. В этой статье мы покажем, как работать с цветом SVG, используя библиотеку Aspose.SVG для .NET, и рассмотрим, как изменить цвет элементов SVG или цвет фона в файлах SVG.

Как добавлять новые элементы SVG и задавать свойства их цвета, мы подробно рассмотрели на примерах C# в статье Редактирование файлов SVG.

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

Изменить цвет SVG

Заливка и обводка – это операции раскрашивания элементов SVG. Все графические элементы, такие как фигуры, контуры и текст, отображаются путем заливки. Заливка рисует внутреннюю часть объекта, а обводка – вдоль его контура. SVG stroke и fill – это некоторые из основных свойств CSS, которые можно установить для любых линий, текста и фигур. Дополнительную информацию о свойствах атрибутов стиля вы найдете в статье Заливка и обводка в SVG.

API Aspose.SVG позволяет изменять цвет различных элементов SVG в документе SVG. Сначала вы должны загрузить существующий документ SVG, а затем изменить цвет необходимого элемента SVG:

1. Используйте один из конструкторов SVGDocument() класса SVGDocument, чтобы загрузить существующий документ SVG.
2. Используйте QuerySelector( selector ), чтобы найти нужный элемент в документе SVG. Метод QuerySelector( selector ) класса Element позволяет получить первый элемент в документе, соответствующий указанному селектору. С получившимися элементами можно производить различные манипуляции: менять его атрибуты, стили CSS и так далее.
3. Используйте метод SetAttribute( name, value) класса Element, чтобы указать атрибуты элемента fill или stroke.

Цвет круга

Чтобы изменить цвет круга, необходимо выполнить несколько шагов:

• Откройте исходный файл SVG.
• Получить корневой элемент SVG документа.
• Получите элемент круга, чтобы изменить цвет.
• Установите новое значение атрибута fill или stroke для элемента круга.
• Сохраните документ SVG.

В следующем фрагменте кода показано, как изменить цвет круга для первого элемента круга SVG в файле basic-shapes.svg, показанном на рисунке (a) ниже:

 1using Aspose.Svg;  2using System.IO;  3using Aspose.Svg.Dom;  4.  5  6 // Prepare a path to a file loading  7 string documentPath = Path.Combine(DataDir, "basic-shapes.svg");  8  9 // Load an SVG document from the file 10 var document = new SVGDocument(documentPath); 11 12 // Get root svg element of the document 13 var svgElement = document.RootElement; 14 15 // Get circle element to change color 16 var circleElement = svgElement.QuerySelector("circle") as SVGCircleElement; 17 18 // Set a new "fill" attribute value for the circle element 19 circleElement.SetAttribute("fill", "green"); 20 21 // Save the SVG document to a file 22 document.Save(Path.Combine(OutputDir, "circle-color.svg"));

Цвет линии

Чтобы изменить цвет линии, вам следует выполнить аналогичные действия. В приведенном ниже примере C# показано, как изменить цвет линии для первого элемента линии SVG в файле Basic-shapes.svg:

 1using Aspose.Svg;  2using System.IO;  3using Aspose.Svg.Dom;  4.  5  6 // Set SVG Namespace Url  7 string SvgNamespace = "https://www.w3.org/2000/svg";  8  9 // Prepare a path to a file loading 10 string documentPath = Path.Combine(DataDir, "basic-shapes.svg"); 11 12 // Load an SVG document from the file 13 var document = new SVGDocument(documentPath); 14 15 // Get root svg element of the document 16 var svgElement = document.RootElement; 17 18 // Get line element to change color 19 var lineElement = svgElement.QuerySelector("line") as SVGLineElement; 20 21 // Set a new "stroke" attribute value for the line element 22 lineElement.SetAttribute("stroke", "green"); 23 24 // Save the SVG document 25 document.Save(Path.Combine(OutputDir, "line-color.svg"));

На следующем рисунке показано исходное изображение (а) и изображения с изменениями цвета SVG для круга (b) и линии (c).

Атрибут fill задает цвет круга SVG (рис. b). В полученном файле circle-color.svg цвет круга меняется с красного (в оригинале) на зеленый. Атрибут stroke задает цвет линии SVG. В полученном файле line-color.svg (рис. c) цвет линии меняется с серого на зеленый. Аналогичным образом вы можете изменить цвет различных графических элементов SVG, таких как фигуры, контуры и текст, используя атрибут fill или stroke.

Изменить цвет фона

Чтобы установить цвет фона для изображения SVG, вам следует добавить новый элемент SVG, например круг или прямоугольник, в качестве первого дочернего элемента в документе SVG. Потому что правило порядка отображения элементов SVG таково: последующие элементы в коде отображаются поверх предыдущих.

В следующем фрагменте кода показано, как создать новый прямоугольник SVG в качестве фона для изображения SVG и раскрасить его:

 1using Aspose.Svg;  2using System.IO;  3using Aspose.Svg.Dom;  4.  5  6 // Set SVG Namespace Url  7 string SvgNamespace = "https://www.w3.org/2000/svg";  8  9 string documentPath = Path.Combine(DataDir, "basic-shapes.svg"); 10 11 // Load an SVG document from the file 12 var document = new SVGDocument(documentPath); 13 14 // Get root svg element of the document 15 var svgElement = document.RootElement; 16 17 // Create a rectangle element and set the "fill" attribute value to change background color 18 var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect"); 19 rectElement.X.BaseVal.Value = 3; 20 rectElement.Y.BaseVal.Value = 3; 21 rectElement.Width.BaseVal.Value = 400; 22 rectElement.Height.BaseVal.Value = 400; 23 rectElement.SetAttribute("fill", "Salmon"); 24 25 // Add the rectangle element as the first child to svg element 26 svgElement.InsertBefore(rectElement, svgElement.FirstChild); 27 28 // Save the SVG document 29 document.Save(Path.Combine(OutputDir, "change-background-color.svg"));

На рисунке показана визуализация исходного SVG-файла basic-shapes.svg и того же файла с добавленным цветом фона.

Перекрасить SVG

Давайте нарисуем снежинку! В следующем примере C# показано, как нарисовать снежинку SVG и перекрасить ее. Вы можете использовать этот подход для любого изображения SVG: измените цвет необходимого элемента SVG и измените цвет фона:

 1using Aspose.Svg;  2using System.IO;  3using Aspose.Svg.Dom;  4.  5  6 // Set SVG Namespace Url  7 string SvgNamespace = "https://www.w3.org/2000/svg";  8  9 string documentPath = Path.Combine(DataDir, "snowflake-blue.svg"); 10 11 // Load an SVG document from the file 12 var document = new SVGDocument(documentPath); 13 14 // Get root svg element of the document 15 var svgElement = document.RootElement; 16 17 // Create a circle element and set the "fill" attribute value to change background color 18 var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle"); 19 circleElement.Cx.BaseVal.Value = 150F; 20 circleElement.Cy.BaseVal.Value = 100F; 21 circleElement.R.BaseVal.Value = 150F; 22 circleElement.SetAttribute("fill", "#03b6fd"); 23 24 // Add the circle element (background) as the first child to svg element 25 svgElement.InsertBefore(circleElement, svgElement.FirstChild); 26 27 // Get the first path element to change color 28 var snowflakePath = svgElement.QuerySelector("path") as SVGPathElement; 29 30 // Set a new "stroke" attribute value for the path element 31 snowflakePath.SetAttribute("stroke", "white"); 32 33 // Save the SVG document 34 document.Save(Path.Combine(OutputDir, "recolor-svg.svg"));

На рисунке показана визуализация исходного SVG-файла snowflake-blue.svg и перекрашенного файла.

Конвертер цветов – это бесплатное онлайн-приложение для преобразования цветов между цветовыми форматами. Просто введите код цвета и сразу получите результат! Вам не нужно никакого дополнительного программного обеспечения. Попробуйте наш мощный конвертер цветов прямо сейчас!

Изменить цвет SVG — изображения

Вношу правки в верстку сайта на Laravel , весь CSS код билдится из SCSS . Код добавления SVG картинки выглядит так:

Почему то не срабатывает

До этого верстал только на голом HTML + CSS сейчас пытаюсь постигнуть новые фишки, сразу видны пробелы в знаниях. Можете подсказать что я делаю не так? Я так понял беда в том, что сначала картинка подтягивается на сайт в своем исходном, а затем я пытаюсь его изменить обычным CSS. Обязательно прибегать к помощи JS? Внес исправления, смена цвета заработала, но 1) :hover таким же образом прописанный не работает. В чем может быть дело? 2) object оборачивается в ссылку, но по клику на него переход не происходит, как это можно исправить?

 
[. ] slug]) >>" title="title >>"> Читать дальше   
 //код svg теперь выглядит так     

Отслеживать
Сергей Курамшин
задан 12 фев 2018 в 7:14
Сергей Курамшин Сергей Курамшин
207 1 1 золотой знак 4 4 серебряных знака 13 13 бронзовых знаков

Это не пробелы в знаниях, а пробелы в технологиях) Проблема в том, что svg работает как отдельный документ, и кажется что js тоже не поможет. Есть поход через якорную ссылку указывать стиль внутри svg и там менять цвет, но не работает в сафари и может еще где-то.

12 фев 2018 в 7:30

Странно, читал много статей, где явно говорилось что именно в таком формате как у меня svg-изображение реально перекрасить, только почему то именно в моем случае их примеры не работали

12 фев 2018 в 7:52

@СергейКурамшин добавьте код иконки svg, от её кода, точнее её стилей на 100% зависит решение ваших проблем. Пока информации мало, вы привели код стандартного добавления svg в HTML

12 фев 2018 в 9:04

4 ответа 4

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

Наверное полезно дать ответ и на более широкий круг вопросов стилизации иконок.
Есть очень полезная статья Styling SVG Content with CSS — перевод,- оригинал

Для решения вашей задачи, полезен раздел статьи — Каскадирование стилей

Из этого раздела можно сделать вывод, что наивысшим приоритетом обладает внутренние стили svg.

Чтобы устранить доминирование приоритета внутренних стилей svg необходимо:

1. Удалить в коде иконки все атрибуты стилизации у патчей, полигонов и т.д все инлайновые стили — fill , stroke
2. Добавить во внешней таблице стилей path
3. Стилизацию иконок уже делать в таблице стилей на уровне классов иконок
4. В шапку файлов *.svg иконок добавить строчку, указывающую на внешнюю таблицу стилей
5. Файл таблицы стилей и файлы SVG лучше разместить в одной папке, так как браузеры чувствительны к этому, больше других chrome

Update

Добавляете спрайт с иконками в HTML

вызываете иконку из спрайта по её id с помощью команды

Вот более подробно о нюансах добавления и стилизации иконки из спрайта

Смотрите, пробуйте варианты, уверен, что у вас получится. Так как это получается у многих, кто хочет добиться результата.

Отслеживать
ответ дан 12 фев 2018 в 9:36
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 114 114 серебряных знаков 377 377 бронзовых знаков

В моем случае картинки в формате svg просто лежат в папке images, такие мне отдал дизайнер. А так как я в первый раз имею дело с svg то даже не знаю как их встраивать. Почитал несколько статей, в одной было написано, что вставка через object со ссылкой на картинку — является одним из лучших решений. Как то так. Можно ли поменять стиль если грузить просто картинкой.svg?

13 фев 2018 в 0:31

Воспользовался вашей инструкцией и все получилось) Спасибо большое. Надоедает, правда идти по всем svg и дописывать xml-stylesheet, но зато раз и навсегда. Можно делать с иконками что угодно. Упустил из виду, что svg это просто path’ы прописанные в коде)

13 фев 2018 в 1:51
Ховер таким же образом прописанный не работает(
13 фев 2018 в 6:03

@СергейКурамшин код иконки добавь в вопрос пожалуйста, не понимаю, почему до сих пор не сделали этого. Проще же будет понять причину

13 фев 2018 в 6:38

@СергейКурамшин Видите, как слова можно понимать по разному.:) Я аж три ответа написал, основываясь на ваших комментариях. А был бы код весь сразу в вопросе, то был бы один, конкретный ответ сразу. Сейчас вижу, что вы смешали два способа вместе 1. инлайн — непосредственное добавление svg кода в Html и добавление спрайта с иконками svg через тег object . Не стоит их смешивать или инлайн или object

13 фев 2018 в 8:22

Ответ #2

Для быстрого решения проблем со стилизацией иконок.
Данная техника подойдет, если нужно быстро добавить иконки в свой проект, которые можно раскрасить в любой цвет из внешнего файла CSS .
Причём иконки высокого качества, практически полный набор на все случаи.
Иконки адаптивны и не теряют качества при масштабировании, так как это иконки SVG из которых состоит символьный шрифт — Google Material Icons

Выбирать иконки по названиям можно здесь

Выбираем нужную иконку с именем — favorite

Подключение иконки к HTML странице:

favorite , где

material-icons — общий класс для всех иконок
red — дополнительный класс, задающий цвет окраски иконки

Ниже пример с тремя одинаковыми иконками, которые раскрашены в разные цвета Добавлена анимация увеличения иконок при hover .

.material-icons < transform: scale(2); >i < margin: 100px 50px 50px 80px; transition: transform 1s ease-in-out; >i:hover < transform: scale(10); >.red .green .blue

 favorite favorite backup

Размер иконок также можно менять, здесь удвоенный исходный размер:

.material-icons

Отслеживать
ответ дан 12 фев 2018 в 12:14
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 114 114 серебряных знаков 377 377 бронзовых знаков
Александр, а иконки обязательно помещать в тег i или можно реализовать в любом теге?
12 фев 2018 в 12:28
@Air попробуй, я пробовал в тег

— получилось, но решил для себя, что лучше в , как в оригинале

12 фев 2018 в 12:30
Ну видать можно)))
12 фев 2018 в 12:32

Вот именно такие иконки были до меня) Сказали поменять на десигнерские) А десигнерские являют собой просто картинку в формате SVG и никакие манипуляции с ней не канают(

13 фев 2018 в 0:28

Ответ #3

Ответ на комментарии

Вот именно такие иконки были до меня) Сказали поменять на десигнерские) А десигнерские являют собой просто картинку в формате SVG и никакие манипуляции с ней не канают

Ховер таким же образом прописанный не работает

Стилизация изображений в формате image/png;base64 при наведении курсора

Представьте такую ситуацию,- дизайнер нарисовал очень красивую картинку, лого и т.д. Выполнил вашу просьбу, чтобы она была в векторном формате.
Но, рисовал её в растровом редакторе и сохранил её, как бы вектор, в формате base64.
То есть встроил растр в векторный формат. Обычная стилизация не работает.
Перерисовать вам в чистом векторе затруднительно.
В этом случае можно заменить стилизацию на обработку SVG фильтрами.

Основная идея — в исходном состоянии на изображение накладывается один фильтр

А при наведении курсора применяются другие цветные фильтры id=»RedFilter» , id=»GreenFilter»

.R1:hover < filter:url(#RedFilter); >.G1:hover < filter:url(#GreenFilter); >.B1:hover