Цвет SVG – Как работать с цветом заливки и цветом обводки? – Руководство Aspose.SVG

Масштабируемая векторная графика (SVG) – это язык XML для создания двумерной векторной и смешанной векторно-растровой графики. SVG позволяет разработчикам и дизайнерам создавать векторные изображения, построенные с использованием точек, линий, путей и фигур. Векторную графику лучше всего использовать для создания логотипов, значков, простой графики и анимации. Она не зависит от разрешения и может создаваться и редактироваться в любом текстовом редакторе. Вы можете раскрашивать фигуры, линии, контуры и текст SVG. Их также можно текстурировать, затенять или создавать из частично прозрачных перекрывающихся слоев.

Что вы узнаете

Как задавать цвета в SVG с помощью атрибутов fill и stroke.
Разница между названиями цветов, значениями HEX, RGB и HSL.
Как раскрашивать фигуры, контуры и текст в SVG.
Как применять и контролировать непрозрачность.
Распространенные ошибки при работе с цветами в SVG и способы их исправления.

Понимание цвета в SVG

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

Таким образом, вы можете установить цвет для элементов SVG двумя способами: с помощью свойств заливки и обводки атрибута style и с помощью атрибутов fill и stroke. Для получения дополнительной информации посетите страницу W3C.

fill & stroke

Свойства fill и stroke атрибута style. Функции заливки и обводки SVG можно установить в атрибуте style. Синтаксис указания свойств следующий:

style="stroke-width:2; stroke:green; fill:#ff0000"

Атрибуты fill и stroke. Заливку и обводку SVG можно указать в атрибутах fill и stroke, используя следующий синтаксис:

stroke-width="2" stroke="green" fill="#ff0000"

Цветовые коды SVG

Чтобы указать цвет SVG, вы можете использовать названия цветов, значения RGB или RGBA, значения HEX, значения HSL или HSLA. В следующих примерах будут использоваться разные способы задания характеристик заливки и обводки, рассмотрим их:

Названия цветов SVG. Существует 147 названий цветов, определенных Спецификацией масштабируемой векторной графики (SVG). Вы можете установить именованные цвета следующим образом: stroke="Green" или fill="Red".
Шестнадцатеричные цветовые коды. Код выражается следующим образом: #RRGGBB, где каждое из двухзначных значений представляет собой диапазон каждого из трех цветов (красный, зеленый, синий), с помощью которого вы выбираете окончательное значение, представляющее каждый цвет. Каждая двузначная шестнадцатеричная пара может иметь значение от 00 до FF. Например, #00FF00 отображается зеленым, поскольку для зеленого компонента установлено максимальное значение (FF), а для остальных – 00.
Вы можете установить зеленый и красный цвета HEX следующим образом: stroke="#00FF00" или fill="#FF0000".
Цветовые коды RGB (Red, Green, Blue). Значения R, G и B представляют собой интенсивность (в диапазоне от 0 до 255) соответственно красной, зеленой и синей составляющих определяемого цвета. Вы можете установить зеленый и красный цвета RGB следующим образом: stroke="rgb(0,255,0)" или fill="rgb(255,0,0)".
Цветовые коды RGBA (Red, Green, Blue, Alpha). Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность цвета. Параметр альфа – это число от 0,0 до 1,0, которое определяет прозрачность. Вы можете определить зеленый и красный цвета RGB следующим образом: stroke="rgba(0,255,0,1.0)" или fill="rgba(255,0,0,1.0)".
Цветовые коды HSL (Hue, Saturation, Lightness). HSL означает оттенок, насыщенность и яркость. Каждый цвет имеет угол на цветовом круге RGB и процентное значение насыщенности и яркости. Коды HSL для зеленого и красного цветов можно установить следующим образом: stroke="hsl(120, 100%, 50%)" и fill="hsl(0, 100%, 50%)"
Цветовые коды HSLA (Hue, Saturation, Lightness, Alpha). Значения цвета HSLA – это расширение значений цвета HSL с альфа-каналом, который определяет непрозрачность цвета. Коды HSL для зеленого и красного цветов вы можете установить следующим образом: stroke="hsla(120, 100%, 50%, 1.0)" и fill="hsla(0, 100%, 50%, 1.0)"

SVG поддерживает различные способы определения цветов, один из которых – использование названий цветов, которые также используются в HTML и CSS. Пожалуйста, обратитесь к статье Имена HTML цветов, чтобы узнать больше о названиях цветов в HTML, их использовании, ограничениях и значении цветов в веб-дизайне. В этой статье исследуется мир названий HTML цветов, их использование, ограничения и значение цветов в веб-дизайне. Здесь мы посчитаем, сколько цветов существует согласно цветовой модели RGB и сколько цветов в стандарте HTML, как возникли названия некоторых цветов и почему мы до сих пор используем их, а не только цветовые коды.

Правила определения цвета

Некоторые правила определения цвета:

Если атрибут fill (или свойство fill атрибута style) не указан, по умолчанию используется черный цвет.
Если атрибут fill (или свойство fill атрибута style) имеет значение none или transparent, заливка фигур прозрачна.
Если атрибут stroke (или свойство stroke атрибута style) не указан, то обводка невидима, отсутствует. Это остается верным, даже если указан атрибут stroke-width.
Чтобы указать цвет заливки или цвет обводки, вы можете использовать имена цветов, значения RGB или RGBA, значения HEX, значения HSL или HSLA. Также вы можете использовать градиенты и узоры (см. раздел Цвет текста или статью SVG-фильтры и градиенты).

Онлайн-конвертер цветов

Для разных задач предпочтительны разные цветовые коды. Поэтому иногда вам может потребоваться конвертировать цветовые коды. Щелкните внутри области цвета, чтобы выбрать цвет, или введите код цвета в текстовое поле Input. Вы сразу увидите другие цветовые коды для выбранного цвета в разделе Output. Воспользуйтесь нашим бесплатным онлайн-конвертером цветов и получите результат сразу!

Цветные фигуры – Color Shapes

Заливка – это цвет внутри фигуры, а обводка – видимый контур объекта. Вы можете залить фигуру одним цветом и обвести ее другим. Если вы создадите фигуру SVG, но не зададите цвет заливки, фигура будет окрашена в черный цвет. Если вы установите атрибут ширины обводки, но не зададите цвет обводки, обводка не будет видна.

Примечание. Заливка и обводка доступны для таких фигур SVG, как круг, эллипс, прямоугольник, ломаная линия и многоугольник. Для линии SVG допускается только обводка.

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

Цвет круга – Circle Color

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

1<svg height="200" width="600" xmlns="http://www.w3.org/2000/svg">
2    <circle cx="70" cy="70" r="50" />
3    <circle cx="200" cy="70" r="50" fill="#79C99E" />
4    <circle cx="330" cy="70" r="50" fill="#79C99E" stroke-width="10" stroke="#508484" />
5    <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" /> 
6    <circle cx="590" cy="70" r="50" fill="none" stroke-width="10" stroke="#508484" />
7</svg>

На рисунке показан фрагмент кода выше:

Text «Четыре цветных круга»

Цвет линии и полилинии – Color Line and Color Polyline

В следующем примере мы рассматриваем применение заливки и обводки для линии SVG и полилинии SVG. Примечание. Во фрагменте кода используется установка цвета заливки и цветовой обводки с помощью свойств fill и stroke атрибута style:

1<svg height="400" width="700" xmlns="http://www.w3.org/2000/svg">
2    <line x1="30" y1="30" x2="30" y2="300" style="stroke:#4387be; stroke-width:10" />
3    <line x1="55" y1="27" x2="130" y2="300" style="stroke:#c4456d; stroke-width:10" />
4    <line x1="80" y1="20" x2="250" y2="300" style="stroke:#77bec1; stroke-width:10" />
5    <polyline points="300,100 360,50 420,100 480,50 540,100 600,50 660,100" style="fill:none; stroke:#fb6796; stroke-width:5" />
6    <polyline points="300,200 360,150 420,200 480,150 540,200 600,150 660,200" style="fill:#c9d7e1; stroke:#fb6796; stroke-width:5" />
7    <polyline points="300,300 360,250 420,300 480,250 540,300 600,250 660,300" style="stroke:#fb6796; stroke-width:5" />
8</svg>

Text «Три линии SVG и три полилинии SVG (незакрашенные и заполненные)»

Цвет ломаной линии и многоугольника – Color Polyline and Color Polygon

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

1<svg height="400" width="500" xmlns="http://www.w3.org/2000/svg">
2    <polyline points="60,290 130,20 200,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
3    <polygon points="260,290 330,20 400,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
4</svg>

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

Text «Полилиния SVG и многоугольник SVG с заливкой и обводкой»

Цвет пути – Path Color

Для элемента SVG <path> вы можете использовать как цветовую обводку, так и цветовую заливку. Атрибут fill окрашивает внутреннюю часть графического элемента. Когда вы заполняете путь SVG, заливка также раскрашивает открытые пути, как если бы последняя его точка была соединена с первой, даже если цвет обводки в этой части пути не появится. Если значение атрибута fill не указано, по умолчанию используется черный цвет.

Чтобы не было заливки, нужно указать значение атрибута fill="none" или fill="transparent". В следующем примере кода мы покажем, как можно использовать заливку и обводку с элементом <path>:

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <path stroke="#a06e84" stroke-width="3" fill="none" d="  
 3	M 150,50 L 150, 300
 4	M 120,100 L 150,50 L 180, 100
 5    M 110,150 L 150,90 L 190, 150
 6	M 90,220 L 150,130 L 210, 220
 7	M 70,300 L 150,190 L 230, 300
 8    M 110,310 L 150,240 L 190, 310
 9	" />
10    <path stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" d="  
11	M 150,50 L 150, 300
12	M 120,100 L 150,50 L 180, 100
13    M 110,150 L 150,90 L 190, 150
14	M 90,220 L 150,130 L 210, 220
15	M 70,300 L 150,190 L 230, 300
16    M 110,310 L 150,240 L 190, 310
17	" />
18</svg>

На рисунке ниже показано, как отображаются значения fill = "none" и fill="#74aeaf":

Text «Два пути SVG: незаполненный и заполненный»

Цвет текста – Text Color

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

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" style="stop-color:lightsalmon" />
 5			<stop offset="50%" style="stop-color:teal" />
 6			<stop offset="90%" style="stop-color:lightpink" />
 7		</linearGradient>
 8    </defs>
 9    <text x="50" y="50" font-family="arial" font-size="40" >How to add SVG text color?</text>
10    <text x="50" y="130" font-family="arial" font-size="40" fill="lightpink" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
11    <text x="50" y="210" font-family="arial" font-size="40" fill="none" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
12    <text x="50" y="290" font-family="arial" font-size="40" fill="url(#grad1)" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
13</svg>

На рисунке показаны различные случаи применения заливки и обводки для добавления цвета текста:

Text «Два пути SVG: незаполненный и заполненный»

Подробнее о стилизации текста можно прочитать в статьях Заливка и обводка в SVG и Фильтры и градиенты SVG.

Непрозрачность – Opacity

Вы можете указать непрозрачность заливки или обводки отдельно в SVG. Они управляются атрибутами fill-opacity и stroke-opacity. Кроме того, вы можете использовать значения RGBA или HSLA, которые разрешены в SVG и дадут тот же эффект:

Цветовые значения RGBA имеют альфа-канал, который определяет непрозрачность цвета. Параметр альфа представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный». Например, rgba(255, 0, 0, 0,5) отображается красным цветом с непрозрачностью 50%.
Значения цвета HSLA указываются с помощью оттенка, насыщенности, яркости и альфа-канала, где параметр альфа определяет непрозрачность. Как и в цветовых кодах RGBA, параметр альфа находится в диапазоне от 0,0 до 1,0. Например, hsla(0, 100%, 50%, 1) отображается чисто красным, hsla(0, 100%, 50%, 0,5) отображается красным с непрозрачностью 50%.

Давайте рассмотрим пример того, как установить непрозрачность цвета заливки фигур. В следующем фрагменте кода мы указываем различные значения непрозрачности, чтобы заполнить прямоугольник синим цветом rgb(0,50,255), используя цветовые коды RGBA (рис. a); для красного hsl(0,100%,50%) – с использованием цветовых кодов HSLA (рис. b) и для цвета HEX #C1B900 – с использованием атрибута fill-opacity (рис. c).

 1<svg height="200" width="1250" xmlns="http://www.w3.org/2000/svg">
 2    <rect x="310" y="30"  width="100" height="100" fill="rgba(0,50,255,0.8)" />
 3   	<rect x="250" y="50"  width="110" height="100" fill="rgba(0,50,255,0.7)" />
 4   	<rect x="170" y="90"  width="110" height="100" fill="rgba(0,50,255,0.6)" />
 5    <rect x="100" y="50"  width="110" height="100" fill="rgba(0,50,255,0.4)" />
 6    <rect x="50" y="30"  width="110" height="100" fill="rgba(0,50,255,0.2)" />
 7    
 8    <rect x="710" y="30"  width="100" height="100" fill="hsla(0,100%,50%,0.8)" />
 9   	<rect x="650" y="50"  width="110" height="100" fill="hsla(0,100%,50%,0.7)" />
10   	<rect x="570" y="90"  width="110" height="100" fill="hsla(0,100%,50%,0.6)" />
11    <rect x="500" y="50"  width="110" height="100" fill="hsla(0,100%,50%,0.4)" />
12    <rect x="450" y="30"  width="110" height="100" fill="hsla(0,100%,50%,0.2)" />
13    
14    <rect x="1110" y="30" width="100" height="100" fill="#C1B900" fill-opacity="0.8" />
15   	<rect x="1050" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.7" />
16   	<rect x="970" y="90" width="110" height="100" fill="#C1B900" fill-opacity="0.6" />
17    <rect x="900" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.4" />
18    <rect x="850" y="30" width="110" height="100" fill="#C1B900" fill-opacity="0.2" />
19</svg>

Text «Три набора цветных прямоугольников с разными значениями непрозрачности»

Распространённые ошибки при работе с цветами SVG и способы их исправления

Даже небольшие ошибки в синтаксисе или атрибутах цветов могут привести к некорректному отображению фигур SVG.

1. Обводка не видна

Проблема: Вы задаёте stroke-width, но обводка не отображается. Исправление: Всегда указывайте и цвет stroke, и stroke-width.

1<circle cx="50" cy="50" r="40" stroke="#d80539ff" stroke-width="4" fill="none" />

2. Фигура выглядит чёрной, а не прозрачной

Проблема: Если атрибут fill отсутствует, цвет по умолчанию – чёрный. Исправление: Если нужна прозрачность, установите fill="none" или используйте RGBA с низким значением альфа.

1<rect width="100" height="100" fill="none" stroke="#3234c5ff" />

3. Неверное или проигнорированное значение цвета

Проблема: Неверный шестнадцатеричный код (например, #FF00 вместо #FF0000) или неподдерживаемое название цвета. Исправление: Всегда используйте 3- или 6-значные шестнадцатеричные коды или стандартные CSS названия цветов.

1<circle cx="40" cy="40" r="30" fill="#FF0000" />

4. Прозрачные цвета работают не так, как ожидалось

Проблема: Фигура не выглядит прозрачной при использовании шестнадцатеричных кодов. Исправление: Шестнадцатеричные значения не поддерживают прозрачность. Используйте RGBA или HSLA. В качестве альтернативы можно использовать fill-opacity или stroke-opacity с шестнадцатеричными цветами.

1<circle cx="60" cy="60" r="40" fill="rgba(231,76,60,0.5)" />

или

1<circle cx="60" cy="60" r="40" fill="#ee54258e" fill-opacity="0.5" />

Совет: Если проблема не устранена, проверьте SVG-файл в консоли браузера – отсутствующие пространства имён (xmlns) или синтаксические ошибки в атрибутах стилей часто приводят к проблемам с цветом.

Быстрые подсказки для работы с цветом

Как раскрасить фигуру SVG. Чтобы изменить цвет фигуры SVG, используйте атрибут fill с любым кодом цвета:

<circle cx="50" cy="50" r="40" fill="#E74C3C" />

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

<rect width="100" height="100" fill="rgba(0,155,0,0.5)" />

Как добавить заливку и обводку. Вы можете комбинировать заливку и обводку, чтобы раскрасить как внутреннюю часть, так и контур SVG-элемента:

<polygon points="30,90 90,90 60,20" fill="#3498DB" stroke="#1B4F72" stroke-width="4" />

Часто задаваемые вопросы

1. В чём разница между заливкой и обводкой в SVG?
Заливка определяет цвет внутри фигуры, а обводка – её контур или границу.

2. Как сделать цвет SVG прозрачным?
Используйте цветовые коды rgba() или hsla() или добавьте атрибуты fill-opacity /stroke-opacity.

3. Можно ли использовать CSS для стилизации цветов SVG?
Да. Вы можете применять цвета через встроенные стили или внешний CSS, используя свойства fill и stroke. Вот пример встроенного CSS для этого:

1<svg height="400" width="700" xmlns="http://www.w3.org/2000/svg">
2<circle cx="70" cy="70" r="50" style="fill:#3498db; stroke:#1f4f72; stroke-width:4;" />
3</svg>

Смотрите также

Как работать с цветом SVG с помощью библиотеки Aspose.SVG для .NET и как менять цвет элементов SVG или цвет фона в SVG-файлах, подробно описано с примерами на C# в статье Как изменить цвет SVG.
Чтобы узнать больше о файлах SVG, их структуре, плюсах и минусах этого формата, а также об истории SVG, посетите статью документации Что такое файл SVG?
Статья Paint Builder подробно описывает Paint Builder, важный компонент API Aspose.SVG Builder, который облегчает точное определение и управление атрибутами fill и stroke в документах SVG. PaintBuilder используется для программного указания значения обводки или заливки, которые используются для различных фигур и элементов SVG при заполнении их узором, градиентом или любым цветом.

Если вы хотите найти нужный цвет, вы можете смешать два цвета с помощью бесплатного онлайн-сервиса Миксер Цветов. Приложение позволяет смешать два цвета в разных количествах и увидеть результат после смешивания. Проверьте наш Миксер Цветов, чтобы развлечься и исследовать природу цвета!

Заливка и обводка в SVG Цвет фона SVG