Заливка и обводка в SVG – атрибуты и примеры

Заливка и обводка – две основные операции рисования в SVG. Фигуры, path-элементы и текст могут использовать fill для внутренней области и stroke для контура. Оба свойства можно задавать как атрибуты представления, например fill="red", или внутри CSS-атрибута style.

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

В этой статье вы узнаете, как:

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

Модель рисования SVG – fill и stroke

Когда SVG-фигура рендерится, рисование происходит в два этапа:

Сначала применяется fill, который закрашивает внутреннюю область фигуры.
Затем применяется stroke, который рисует контур, центрированный относительно пути фигуры.

И fill, и stroke необязательны:

Если fill не указан, фигура по умолчанию заливается черным цветом.
Если stroke не указан, контур не рисуется.

Для задания SVG-цветов можно использовать имена цветов, HEX-значения, RGB-значения, currentColor, градиенты или паттерны. Примеры ниже показывают несколько способов записи значений fill и stroke в SVG-разметке.

Свойства и атрибуты в SVG

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

Свойство означает саму стилевую возможность, например fill или stroke-width.
Атрибут означает способ применения этого свойства в SVG-разметке.

Понятие	Пример
CSS-свойство	`fill`, `stroke`, `stroke-width`
Атрибут представления	`fill="red" stroke="#00ff00" stroke-width="2"`
Inline CSS	`style="fill:red; stroke:#00ff00; stroke-width:2"`

В этой статье:

Свойство означает концептуальную стилевую возможность.
Атрибут означает ее запись в SVG-разметке.

Используйте атрибуты представления для простой SVG-разметки и inline CSS, когда несколько стилевых свойств должны оставаться вместе на одном элементе. Оба варианта часто встречаются в SVG-файлах.

Как использовать SVG fill и stroke

Выберите SVG-элемент, который нужно раскрасить, например <path>, <rect>, <circle>, <polyline> или <text>.
Задайте fill, чтобы раскрасить внутреннюю область, или используйте fill="none", если должен быть виден только контур.
Задайте stroke, чтобы определить цвет обводки.
Задайте stroke-width, чтобы сделать обводку видимой и настроить ее толщину.
Добавьте stroke-linecap, stroke-linejoin или stroke-dasharray, если обводке нужна определенная форма или паттерн.
Используйте fill-opacity и stroke-opacity, когда заливке и обводке нужны разные значения прозрачности.

SVG Fill

Свойство fill определяет, как закрашивается внутренняя область фигуры или текста. Оно применяется к SVG-фигурам, таким как <rect>, <circle>, <path>, а также к текстовым элементам. Если fill не указан, значение по умолчанию – black.

Значение	Описание	Пример
значение цвета	Заливает фигуру сплошным цветом	`fill="red"`
`none`	Отключает заливку	`fill="none"`
`url(#id)`	Использует источник рисования (paint server), например градиент или паттерн	`fill="url(#gradient1)"`
`currentColor`	Использует текущий цвет текста	`fill="currentColor"`

Пример ниже сравнивает path с fill="none" и тот же path без явно заданной заливки ( two-paths.svg):

1<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
3    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" transform="translate(0 125)" />
4</svg>

Два SVG path-элемента сравнивают fill none и черную заливку по умолчанию

SVG Stroke

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

Цвет и ширина обводки

Свойство	Описание	Пример
`stroke`	Задает цвет обводки	`stroke="red"`
`stroke-width`	Управляет толщиной обводки	`stroke-width="5"`

Значения `stroke-linecap`

Для любой линии можно задать форму ее концов. Свойство stroke-linecap определяет, как рендерятся концы SVG-линии, и принимает три значения:

Значение	Вид
`butt`	Ровный край, который заканчивается точно в конечной точке path-элемента.
`square`	Ровный край, который выходит за конечную точку на половину ширины обводки.
`round`	Полукруглый конец с радиусом, равным половине ширины обводки.

Эффект хорошо заметен, когда у линии достаточно большое значение stroke-width. Пример ниже показывает, как stroke-width и stroke-linecap определяют толщину обводки и форму концов ( lines.svg).

 1<svg height="200" width="800" xmlns="http://www.w3.org/2000/svg">
 2  <g stroke="grey">
 3    <path stroke-width="3" d="M 5 20 l 215 0" />
 4    <path stroke-width="15" d="M 5 60 l 215 0" />
 5    <path stroke-width="30" d="M 5 100 l 215 0" />
 6  </g>
 7 <g stroke="grey" stroke-width="30">
 8    <path stroke-linecap="butt" d="M 300 20 l 215 0" />
 9    <path stroke-linecap="round" d="M 300 60 l 215 0" />
10    <path stroke-linecap="square" d="M 300 100 l 215 0" />
11  </g>
12  <g stroke="orange" stroke-width="2">
13    <line x1="300" y1="20" x2="515" y2="20" />
14    <path d="M 300 60 l 215 0" />
15    <path d="M 300 100 l 215 0" />
16  </g>
17</svg>

В примере элемент <g> задает общие свойства, такие как stroke и stroke-width, для нескольких дочерних path-элементов.

Два набора SVG-линий с разными значениями width и свойствами stroke-linecap

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

Значения `stroke-linejoin`

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

Значение	Описание
`miter`	Продлевает внешние края до угла, это значение по умолчанию.
`round`	Скругляет угол радиусом в половину ширины обводки.
`bevel`	Срезает угол, создавая плоский край.

Следующий пример показывает значения stroke-linejoin ( linejoin.svg):

 1<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
 2    <g stroke-width="20" fill="none">
 3        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" stroke="grey" stroke-linecap="butt"  stroke-linejoin="miter" />
 4        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" stroke="#CD5C5C" stroke-linecap="round" stroke-linejoin="round" />
 5        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" stroke="black"  stroke-linecap="square" stroke-linejoin="bevel" />
 6    </g>
 7    <g fill="none" stroke="orange" stroke-width="2">
 8        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" />
 9        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" />
10        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" />
11    </g>
12</svg>

Три polyline с разными свойствами stroke-linejoin

Оранжевая линия показывает исходный путь polyline, а более широкая цветная линия показывает обводку, отрендеренную вокруг него.

Точки и штрихи – `stroke-dasharray`

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

1stroke-dasharray="10 5"   /* штрих 10, промежуток 5 */
2stroke-dasharray="20 10 5"/* штрих 20, промежуток 10, штрих 5, затем повтор */

Свойство	Описание
`stroke-dasharray`	Задает паттерн штрихов и промежутков
`stroke-dashoffset`	Сдвигает пунктирный паттерн

Вот пример использования stroke-dasharray ( dasharray.svg):

1<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
2    <line x1="20" y1="30" x2="400" y2="30" style="stroke:rgb(112, 128, 144); fill:none; stroke-width:10; stroke-dasharray:10 5;" />
3    <line x1="20" y1="80" x2="400" y2="80" style="stroke:olive; fill:none; stroke-width: 20; stroke-dasharray: 20 10 5;" />
4    <path d="M 10 200 Q 50 100 150 200 T 230 200 T 300 200 T 390 200" stroke="#FF8C00" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="15 10 2 8" />
5</svg>

Для серой и оранжевой линий пунктирный паттерн использует четное количество значений: каждая пара означает длину штриха и длину промежутка. Если список содержит нечетное количество значений, SVG повторяет список, чтобы получить четный паттерн. Например, 20 10 5 становится 20 10 5 20 10 5, как показано на оливковой линии.

Три path-элемента с разными свойствами stroke-dasharray

Вы можете экспериментировать с атрибутом stroke-dasharray. С помощью SVG-обводок и простых SVG-фигур можно получить выразительные декоративные эффекты ( dasharray-example.svg):

 1<svg height="600" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <g fill="none">
 3        <circle cx="100" cy="100" r="40" stroke="red" stroke-width="55" stroke-dasharray="4,2" />
 4        <circle cx="100" cy="100" r="30" stroke="grey" stroke-width="45" stroke-dasharray="5,2" transform="translate(120,40)" />
 5        <circle cx="100" cy="100" r="35" stroke="orange" stroke-width="45" stroke-dasharray="9,3" transform="translate(30,130)" />
 6		<circle cx="100" cy="100" r="20" stroke="pink" stroke-linecap="round" stroke-width="20" stroke-dasharray="10,15" transform="translate(380,120)" />
 7        <rect x="320" y="100" width="100" height="100" stroke="DarkCyan" stroke-width="55" stroke-dasharray="7 7 3 2" />
 8        <text x="200" y="300" font-family="arial" font-size="60" stroke="#000080" stroke-width="3" stroke-dasharray="2 1">I love SVG!</text>
 9    </g>
10</svg>

Окружность, прямоугольник и текст с разными паттернами stroke-dasharray

Дополнительные SVG-атрибуты рисования

Атрибут	Назначение	Пример
`fill-opacity`	Значение от `0` (прозрачно) до `1` (непрозрачно)	`fill-opacity="0.6"`
`fill-rule`	Определяет, как заполняются сложные фигуры. Варианты: `nonzero` (по умолчанию) или `evenodd`.	`fill-rule="evenodd"`
`stroke-opacity`	Значение от `0` (прозрачно) до `1` (непрозрачно)	`stroke-opacity="0.6"`
`stroke-miterlimit`	Ограничивает максимальную длину miter-соединения. Значения больше `1`.	`stroke-miterlimit="4"`
`stroke-dashoffset`	Сдвигает начало пунктирного паттерна вдоль path-элемента.	`stroke-dashoffset="5"`

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

FAQ – SVG fill и stroke

Как сделать path-элемент только контуром без заливки?

Задайте fill="none". Это уберет внутреннюю заливку, но оставит видимой обводку. Используйте stroke и stroke-width, чтобы настроить контур.

В чем разница между fill и stroke в SVG?

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

Почему stroke-dasharray выглядит неровно на кривых path-элементах?

Длины штрихов измеряются вдоль path-элемента. На кривых сегменты штрихов могут выглядеть визуально неравномерно. Настройте длины штрихов и промежутков или используйте stroke-dashoffset для тонкой настройки паттерна.

Когда использовать stroke-linecap="round", а когда stroke-linejoin="round"?

stroke-linecap влияет на концы открытых участков path, а stroke-linejoin влияет на углы, где соединяются два сегмента. Используйте round в обоих свойствах, если нужно смягчить и концы, и углы.

Можно ли использовать градиенты для fill и stroke?

Да. Градиенты и паттерны можно применять через fill="url(#id)" или stroke="url(#id)", где id указывает на определение градиента или паттерна.

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

Проблема	Причина	Решение
Фигура выглядит черной, хотя ожидалась другая заливка	Атрибут `fill` пропущен или осталось значение по умолчанию	Добавьте `fill="none"` или допустимый цвет, например `fill="#00ff00"`.
Штрихи пропадают на кривой линии	Значения `stroke-dasharray` слишком малы относительно длины кривой	Увеличьте длины штрихов и промежутков или используйте `stroke-dashoffset` для смещения.
Концы обводки выглядят обрезанными	`stroke-linecap` не задан при использовании толстой обводки	Задайте `stroke-linecap="square"` или `round` для нужного отображения концов.
Miter-соединения создают слишком длинные острые выступы	Острые углы используют `stroke-linejoin="miter"` с высоким miter limit	Уменьшите `stroke-miterlimit` или используйте `stroke-linejoin="round"` либо `bevel`.
Прозрачность случайно применяется и к fill, и к stroke	Используется `opacity` вместо `fill-opacity` и `stroke-opacity`	Замените `opacity` на `fill-opacity` и/или `stroke-opacity`.

Быстрые рецепты

Шпаргалка по fill и stroke

Цель	SVG-код
Отключить заливку	`fill="none"`
Задать сплошную заливку	`fill="orange"`
Сделать заливку полупрозрачной	`fill-opacity="0.5"`
Включить обводку	`stroke="black"`
Утолщить контур	`stroke-width="4"`
Сделать пунктирную обводку	`stroke-dasharray="10 5"`
Скруглить концы обводки	`stroke-linecap="round"`

Практические примеры

1. Простая сплошная заливка и обводка

1<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="60" cy="60" r="50" fill="#4CAF50" stroke="#026802" stroke-width="4"/>
3</svg>

2. Пунктирная линия со смещением

1<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">
2  <line x1="10" y1="20" x2="190" y2="20" stroke="#ff6600" stroke-width="8" stroke-dasharray="15 5" stroke-dashoffset="7"/>
3</svg>

Пунктирная обводка со скругленными концами

1<line x1="10" y1="40" x2="140" y2="40"
2      stroke="black"
3      stroke-width="4"
4      stroke-dasharray="10 6"
5      stroke-linecap="round" />

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

Раздел спецификации SVG о painting определяет fill, stroke, источники рисования, opacity, формы концов линий, соединения и dash-свойства.
Определение presentation attributes в SVG 2 объясняет, как стилевые свойства, такие как fill и stroke, можно записывать прямо как SVG-атрибуты.
Список color keywords в SVG 1.1 полезен, когда нужны именованные цвета, например red, orange или DarkCyan, в SVG-примерах.
Используйте SVG Color для форматов цвета, прозрачности и opacity в SVG.
Откройте SVG-градиенты, чтобы применять линейные или радиальные градиенты к fill и stroke.
Используйте SVG-фигуры, чтобы увидеть, как fill, stroke и stroke-width применяются к базовым SVG-фигурам.
Редактирование SVG-файла содержит примеры .NET API, которые создают SVG-элементы и программно задают цветовые свойства.
Как изменить цвет SVG дает целевые .NET-примеры обновления цветов SVG-элементов и цвета фона.
Изменение цветов SVG в Python показывает примеры Python via .NET для редактирования fill, stroke, inline styles и gradient stops.

Матрица SVG-трансформации Цвет SVG