Как поменять цвет 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 – примеры 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

3 ответа 3

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

Наверное полезно дать ответ и на более широкий круг вопросов стилизации иконок.
Есть очень полезная статья 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 золотых знака 113 113 серебряных знаков 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 золотых знака 113 113 серебряных знаков 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

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

В этой статье рассмотрим несколько примеров, как задать цвет любому изображению в формате svg с использованием css-стилей.

Есть множество вариантов, как использовать SVG. От того, как вы применяете SVG и будет зависеть способы редактирования.

Давайте начнем с базы.

Основы

Что такое SVG?

SVG (Scalable Vector Graphic) — масштабируемая векторная графика. Это уникальный формат для изображений. В отличии от привычных нам форматов, в svg не используются пиксели. Здесь картинка строется на векторах. Это значит, что вы можете, например, масштабирать размер картинки до любых значений и при этом не терять качество.

Изображение svg можно вставить кодом прямо в файл html — это будет инлайновый вариант:

А можно вставить через тег img:

Если заглянуть «под капот» и изучить код, который отвечает за отрисовку SVG, то можно выделить два свойства, которые отвечают за цвет — fill (заливка) и stroke (обводка). Их можно редактировать и тем самым менять цвет иконки.

Давайте выделим несколько методов, которые позволяют менять цвет SVG.

1. Меняем цвет с помощью свойства fill

Смотрите, у нас два квадрата — они идентичны, за исключением свойства fill. В одном случае мы залили квадрат красным цветом, в другом вообще не прописали это свойство.

Свойство fill можно применять к отдельному вектору в вашем изображении.

2. Меняем цвет в файле style.css

Или в любом другом файле css, который подключен к html.