Заливки и обводки

Существует несколько способов задать цвет фигурам (в том числе указав атрибуты объекта): с помощью встроенного CSS, встроенного раздела CSS или внешнего CSS-файла. В большинстве файлов SVG, которые можно найти в интернете, используется встроенный CSS, однако у каждого способа есть свои преимущества и недостатки.

Атрибуты заливки и обводки

Рисование

Базовую окраску можно задать, указав два атрибута узла: fill и stroke. Атрибут fill задаёт цвет внутренней области объекта, а stroke — цвет линии, обводящей объект. Можно использовать те же способы указания цветов в CSS, что и в HTML: названия цветов (например, red), значения RGB (например, rgb(255 0 0)), шестнадцатеричные значения и т. д.

<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect
    x="10"
    y="10"
    width="100"
    height="100"
    stroke="blue"
    fill="purple"
    fill-opacity="0.5"
    stroke-opacity="0.8"
    stroke-width="15" />
</svg>

Кроме того, в SVG можно отдельно задать прозрачность fill или stroke. Для этого используются атрибуты fill-opacity и stroke-opacity.

Обводка

Помимо свойств цвета, есть ещё несколько атрибутов, позволяющих управлять тем, как обводка отображается на линии.

<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>

Свойство stroke-width задаёт ширину обводки. Обводка располагается по центру контура. В примере выше контур показан розовым цветом, а обводка — чёрным.

Второй атрибут, влияющий на обводку, — свойство stroke-linecap, показанное выше. Оно задаёт форму концов линий.

Для stroke-linecap возможны три значения:

• butt завершает линию прямым краем, перпендикулярным (под углом 90 градусов) направлению обводки и проходящим через её конец.
• square выглядит почти так же, но немного продлевает обводку за фактический контур. Расстояние, на которое обводка выходит за контур, равно половине значения stroke-width.
• round создаёт закруглённый конец обводки. Радиус этой дуги также задаётся значением stroke-width.

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

<?xml version="1.0" standalone="no"?>
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>

  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="none" stroke-linejoin="round"/>

  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>

Каждая из этих ломаных состоит из двух отрезков. Соединение между ними задаётся атрибутом stroke-linejoin. Для этого атрибута предусмотрено три значения. miter немного продлевает линию за её обычную ширину, создавая прямоугольный угол с одним углом. round создаёт закруглённое соединение отрезков. bevel создаёт новый угол для плавного перехода между двумя отрезками.

Наконец, можно задать пунктирную обводку с помощью атрибута stroke-dasharray.

<?xml version="1.0" standalone="no"?>
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
  <path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>

В качестве значения атрибута stroke-dasharray можно указать последовательность чисел, разделённых запятыми и/или пробелами.

Первое число задаёт длину закрашенного участка, а второе — незакрашенного. Так, в примере выше второй контур закрашивается на 5 пикселей, затем следует промежуток длиной 5 пикселей, после чего начинается следующий штрих длиной 5 пикселей. Для более сложного узора можно указать больше чисел. В первом примере указаны три числа, поэтому средство визуализации повторяет их дважды, чтобы создать равномерный узор. Таким образом, сначала отображаются 5 закрашенных единиц, 10 пустых, 5 закрашенных, а затем последовательность повторяется: 5 пустых, 10 закрашенных, 5 пустых. Затем узор повторяется.

Доступны также дополнительные свойства stroke и fill, включая fill-rule, которое задаёт способ окрашивания самопересекающихся фигур; stroke-miterlimit, которое определяет, следует ли отображать острые углы обводки; и stroke-dashoffset, которое задаёт начальную точку пунктирного узора на линии.

Порядок отрисовки

Порядок отрисовки заливки и обводки можно задать с помощью атрибута paint-order.

<?xml version="1.0" standalone="no"?>
<svg width="400" height="180" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline
    points="40 80 80 40 120 80"
    stroke-width="15"
    stroke="black"
    fill="coral"
    paint-order="fill" />

  <polyline
    points="40 140 80 100 120 140"
    stroke-width="15"
    stroke="black"
    fill="coral"
    paint-order="stroke" />
</svg>

У первой фигуры заливка отрисована перед обводкой, поэтому чёрная обводка расположена поверх заливки. У второй фигуры обводка отрисована перед заливкой.

Использование CSS

Помимо задания атрибутов объектов, для оформления заливок и обводок можно использовать CSS. Не все атрибуты можно задать с помощью CSS. Связанные с рисованием и заливкой атрибуты обычно доступны, поэтому таким способом можно задать fill, stroke, stroke-dasharray и т. д., а также показанные ниже варианты с градиентом и узором. Такие атрибуты, как width, height или команды <path>, нельзя задать с помощью CSS. Проще всего проверить, что доступно, а что нет.

CSS можно встроить в элемент с помощью атрибута style:

 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>

Также стили можно перенести в отдельный раздел style. Однако, в отличие от HTML, где такой раздел помещают в раздел <head>, в SVG его добавляют в область <defs>.

<defs> означает «определения». Здесь можно создавать элементы, которые не отображаются непосредственно в SVG, но используются другими элементами.

<?xml version="1.0" standalone="no"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style><![CDATA[
       #MyRect {
         stroke: black;
         fill: red;
         paint-order: stroke;
       }
    ]]></style>
  </defs>
  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>

Перенос стилей в такую область упрощает изменение свойств для больших групп элементов. Также можно использовать, например, :hover для создания эффектов при наведении:

#MyRect:hover {
  stroke: black;
  fill: blue;
}

Правила CSS можно также вынести во внешнюю таблицу стилей, используя обычный синтаксис XML-таблицы стилей:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect height="10" width="10" id="MyRect"/>
</svg>

Файл style.css может выглядеть примерно так:

#MyRect {
  fill: red;
  stroke: black;
}