Helpful resources ▼
  Download   Pricing   Buy

Цвет SVG – fill, stroke, opacity и цветовые коды

Цвет SVG определяет, как отображаются фигуры, path-элементы, линии и текст. Цвет можно задавать через fill, stroke, атрибуты прозрачности, CSS-стили, именованные цвета, HEX, RGB, HSL, градиенты и паттерны. В этом учебнике объясняются основные правила цвета SVG и показано, как одни и те же цветовые значения работают с разными SVG-элементами.

Быстрый ответ: В SVG используйте fill для внутренней области фигур, path-элементов и текста, stroke – для контуров и линий, а opacity, fill-opacity или stroke-opacity – для прозрачности. Цветовые значения могут быть именованными цветами, HEX, RGB/RGBA, HSL/HSLA или ссылками url(#id) на градиенты и паттерны.

1<circle cx="50" cy="50" r="40" fill="#3498db" stroke="#1f4f72" stroke-width="4" />

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

Как работает цвет SVG

В SVG применение цвета к элементу называется painting. Paint определяет, как элемент будет отрисован: с заливкой, с обводкой или с обоими типами окрашивания. Эти свойства управляют внутренней областью и контуром фигур, path-элементов и текста.

SVG поддерживает два распространенных способа задания цвета:

Оба подхода участвуют в правилах CSS cascade и inheritance, но имеют разный приоритет. Presentation attribute, например fill="red", легко читать и редактировать, а inline-объявление в style обычно переопределяет то же свойство, записанное как presentation attribute. Более подробное руководство по SVG-стилям и C# смотрите в статье SVG CSS vs Inline Styles vs Presentation Attributes.

fill и stroke

SVG использует два основных свойства для применения цвета:

СвойствоЧто окрашиваетПоведение по умолчанию
fillВнутреннюю область фигуры или замкнутого path-элементаПо умолчанию black
strokeКонтур фигуры, линии или текстаПо умолчанию не отображается

Фигура может использовать каждое свойство отдельно или сочетать оба. Например, круг может иметь цветную заливку и видимую обводку, а элемент <line> окрашивается только через stroke. Замкнутые фигуры, такие как <circle>, <rect> и <polygon>, поддерживают и fill, и stroke.

Правила цветовых значений SVG

При интерпретации цветовых значений SVG использует несколько важных правил:

Коды цвета SVG – HEX, RGB, HSL и имена цветов

Кратко

  • HEX – компактный формат цвета, часто используемый в статической SVG-графике.
  • RGB/RGBA – удобен для программного управления цветом и динамической прозрачностью.
  • HSL/HSLA – лучше подходит для дизайнерских задач и системных вариаций цвета.

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

Формат цветаКогда использоватьПример
Именованный цветПростые читаемые примеры и прототипыfill="green"
HEXКомпактные стабильные цвета в иконках и иллюстрацияхfill="#00FF00"
RGBПрограммные значения из красного, зеленого и синего каналовfill="rgb(0,255,0)"
RGBAЦвет и прозрачность в одном значенииfill="rgba(0,255,0,0.6)"
HSLДизайнерские настройки через тон, насыщенность и светлотуfill="hsl(120,100%,50%)"
HSLAHSL-цвет с прозрачностьюfill="hsla(120,100%,50%,0.6)"
url(#id)Градиенты и паттерны, определенные в <defs>fill="url(#grad1)"

Примеры цветовых кодов SVG

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

1<circle cx="50" cy="50" r="40" fill="green" stroke="red" />
2<circle cx="50" cy="50" r="40" fill="#00FF00" stroke="#FF0000" />
3<circle cx="50" cy="50" r="40" fill="rgb(0,255,0)" stroke="rgb(255,0,0)" />
4<circle cx="50" cy="50" r="40" fill="rgba(0,255,0,0.6)" stroke="rgba(255,0,0,0.8)" />
5<circle cx="50" cy="50" r="40" fill="hsl(120,100%,50%)" stroke="hsl(0,100%,50%)" />
6<circle cx="50" cy="50" r="40" fill="hsla(120,100%,50%,0.6)" stroke="hsla(0,100%,50%,0.8)" />

Совет:

  • Если нужна прозрачность, используйте RGBA/HSLA или отдельные атрибуты fill-opacity и stroke-opacity.
  • Практический справочник по именованным цветам смотрите в статье HTML Color Names.

Как задать цвет SVG

  1. Выберите целевой SVG-элемент, например <circle>, <path>, <line>, <polygon> или <text>.
  2. Используйте fill для цвета внутренней области замкнутых фигур, path-элементов и текста.
  3. Используйте stroke и stroke-width для контуров и цвета линий.
  4. Выберите формат цвета: именованный цвет, HEX, RGB/RGBA, HSL/HSLA или url(#id) для градиентов и паттернов.
  5. Используйте fill-opacity, stroke-opacity, RGBA или HSLA, если нужна прозрачность.
  6. Проверьте значения по умолчанию: отсутствующий fill становится черным, а отсутствующий stroke означает, что контур не рисуется.

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

Используйте онлайн-конвертер цветов, когда нужно получить точное значение цвета перед вставкой в SVG-атрибут fill, stroke, style или в gradient stop. Например, можно преобразовать фирменный RGB-цвет в HEX для компактной SVG-разметки или перевести HEX в HSL, чтобы предсказуемо менять тон, насыщенность или светлоту. Конвертер не редактирует SVG-файл напрямую: скопируйте полученное значение в нужный SVG-атрибут или CSS-объявление.

Цвет SVG-фигур

Цвет круга SVG

Круг – одна из самых простых SVG-фигур, поэтому он удобен для демонстрации цвета. Изменяя свойства fill и stroke, вы управляете цветом внутренней области круга, его контуром или обоими параметрами сразу.

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

1<svg height="200" width="700" 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="#508484" stroke-width="10" />
5  <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" />
6  <circle cx="590" cy="70" r="50" fill="none" stroke="#508484" stroke-width="10" />
7</svg>

В этом примере:

Круги SVG с разными сочетаниями fill и stroke

Цвет элементов line и polyline в SVG

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

В примере ниже сравниваются элементы <line> и <polyline>, чтобы показать, как работают цвет обводки, толщина обводки и заливка в разных сценариях.

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>

В этом примере:

Три SVG-линии и три polyline с разным поведением stroke и fill

Цвет элементов polyline и polygon в SVG

На первый взгляд polyline и polygon похожи, но при окрашивании они ведут себя по-разному. Главное отличие в том, что polyline – открытая фигура, а polygon всегда замкнут.

В примере ниже используются одни и те же значения fill и stroke, чтобы наглядно показать, как 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>

Обе фигуры используют одинаковые значения заливки и обводки, поэтому различие в их поведении хорошо видно:

Элементы polyline и polygon с одинаковыми значениями fill и stroke

Цвет SVG path-элементов

Path-элементы – самые гибкие элементы SVG: они могут описывать и открытые линии, и замкнутые фигуры. Поэтому их цветовое поведение зависит от того, образует ли path замкнутую область или остается открытым.

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

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2  <!-- Unfilled path -->
 3  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 4           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
 5           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
 6        stroke="#a06e84" stroke-width="3" fill="none" />
 7  <!-- Filled path -->
 8  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 9           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
10           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
11        stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" />
12</svg>

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

Два SVG path-элемента с отключенной и включенной заливкой

Цвет SVG-текста

Как и другие SVG-фигуры, текст может иметь и stroke, и fill. В этом примере показано, как задать цвет заливки и обводки текста, а также использовать градиент как заливку. Как и у других 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>

На рисунке показаны разные варианты применения fill и stroke к SVG-тексту:

Примеры SVG-текста с заливкой по умолчанию, fill и stroke, контурным текстом и градиентной заливкой

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

Прозрачность SVG и opacity

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

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

В этом примере:

Три группы SVG-прямоугольников, показывающие RGBA, HSLA и HEX с fill-opacity

Типичные ошибки и исправления

Ниже перечислены частые причины неожиданного поведения цвета в SVG.

ПроблемаПричинаИсправление
Обводка не виднаЗадан stroke-width, но не указан цвет strokeДобавьте значение stroke, например stroke="#d80539" stroke-width="4"
Фигура выглядит черной, а не прозрачнойfill пропущен, и SVG использует черную заливку по умолчаниюИспользуйте fill="none", если нужен только контур
Цветовое значение игнорируетсяСтрока цвета записана с ошибкой или не поддерживаетсяИспользуйте корректный именованный цвет, 3- или 6-значный HEX, RGB/RGBA или HSL/HSLA
Прозрачность не работаетHEX-цвет не содержит прозрачностиИспользуйте RGBA, HSLA, fill-opacity или stroke-opacity
CSS-цвет не применяетсяInline style или более специфичное CSS-правило переопределяет егоПроверьте computed styles и удалите или обновите конкурирующий style, fill, stroke или CSS-правило

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

Быстрые рецепты цвета SVG

ЦельФрагмент кода
Раскрасить фигуру<circle cx="50" cy="50" r="40" fill="#E74C3C" />
Сделать фигуру полупрозрачной<rect width="100" height="100" fill="rgba(0,155,0,0.5)" />
Использовать fill и stroke вместе<polygon points="30,90 90,90 60,20" fill="#3498DB" stroke="#1B4F72" stroke-width="4" />
Оставить только stroke<line x1="0" y1="0" x2="100" y2="0" stroke="#ff6600" stroke-width="2" />

FAQ – цвет SVG

Какой формат цвета SVG лучше использовать?

Используйте HEX для компактной статической графики, RGB/RGBA – когда значения приходят из кода или нужна альфа-прозрачность, а HSL/HSLA – когда нужно управлять тоном, насыщенностью или светлотой. Именованные цвета удобны для простых примеров, но в рабочих SVG-файлах обычно понятнее HEX или RGB.

Как сделать цвет SVG прозрачным?

Используйте цветовые значения rgba() или hsla() либо оставьте цвет отдельно и добавьте fill-opacity или stroke-opacity. Используйте opacity только тогда, когда прозрачным должен стать весь элемент целиком.

Можно ли стилизовать цвета SVG через CSS?

Да. Цвета SVG можно задавать через inline styles, блоки стилей или внешний CSS с помощью fill, stroke и связанных свойств. Inline style и presentation attributes могут переопределять более общие CSS-правила.

Почему SVG-фигура становится черной?

Если fill не задан, SVG по умолчанию заполняет замкнутые фигуры черным цветом. Добавьте fill="none" для фигуры только с контуром или задайте конкретный цвет заливки.

Можно ли использовать в SVG HEX, RGB и HSL?

Да. SVG принимает именованные цвета, HEX-значения, RGB/RGBA, HSL/HSLA и paint-ссылки, например url(#gradient-id). Если цвет должен быть прозрачным, используйте RGBA, HSLA или атрибуты прозрачности.

Почему fill не меняет цвет SVG-линии?

Элемент <line> не имеет внутренней области, поэтому fill не делает его видимым. Для SVG-линий, polyline, контуров и открытых path-элементов используйте stroke.

Можно ли использовать градиенты как цвета SVG?

Да. Используйте fill="url(#gradient-id)" или stroke="url(#gradient-id)", чтобы применить градиент, определенный в разделе <defs> SVG-документа.

Как изменить цвета SVG программно?

Используйте рабочий процесс через SVG DOM: загрузите файл, выберите целевой элемент, обновите fill, stroke, style или значения gradient stop, затем сохраните документ. Для целевых C#-примеров смотрите Как изменить цвет SVG, а для случаев, когда цвет управляется inline styles, CSS-правилами или нормализацией стилей, смотрите Modify SVG Styles Programmatically in C#. Для Python via .NET используйте статью Изменение цветов SVG в Python.

Спецификация и связанные ресурсы

Используйте бесплатный онлайн-сервис Color Mixer, когда нужно смешать два цвета и визуально оценить результат.

Онлайн-приложение Color Mixer для смешивания и подбора цветов SVG

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