Работа с цветом в SVG: fill, stroke и секреты

В отличие от растровых изображений, где цвет «запекается» в пиксели, SVG позволяет гибко и динамически контролировать заливку и контур каждой фигуры прямо из CSS или через атрибуты. fill определяет цвет, которым заполняется внутренняя область элемента (например, круг или путь), а stroke отвечает за цвет линии, которая очерчивает его границы. Уже на этом базовом уровне открывается огромное поле для экспериментов.

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80"
          fill="lightblue"
          stroke="navy"
          stroke-width="10"/>
</svg>

Это открывает путь к созданию сложных и визуально привлекательных объектов. Помимо сплошного цвета, вы можете использовать градиенты, узоры (patterns), полностью отключать заливку или обводку, а также применять наследование цвета от родительских элементов. Такой подход превращает SVG из статичной картинки в динамический ресурс, стиль которого легко менять через таблицы стилей.

Основные типы значений

• none: полное отсутствие заливки или обводки.
• currentColor: ключевое слово, которое берет значение цвета из свойства color элемента. это мощный инструмент для поддержания единой цветовой схемы.
• url(#id): ссылка на градиент или узор, определенный в том же SVG-документе.
• rgb() / rgba() / hsl() / hsla(): различные цветовые модели для точного контроля.

<svg width="200" height="100">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="gold"></stop>
      <stop offset="100%" stop-color="red"></stop>
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#myGradient)" stroke="currentColor"></rect>
</svg>

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

Ключевые свойства контура

1. stroke-width: толщина линии (например, 2px, 5%).
2. stroke-linecap: форма концов линии. возможные значения: butt (обрез), round (круглая), square (квадратная).
3. stroke-linejoin: форма соединения отрезков в ломаных линиях и контурах. значения: miter (острое), round (скругленное), bevel (скошенное).
4. stroke-dasharray: создает пунктирную или штриховую линию. пример: stroke-dasharray: 10 5 (10px черта, 5px пробел).
5. stroke-dashoffset: смещение начала паттерна, заданного dasharray. это основа для анимации «рисования» контура.
6. stroke-opacity: прозрачность обводки от 0 до 1.

#rectangle {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20 10 5 10; /* Сложный паттер: 20-10-5-10 */
}

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

Если атрибутам fill или stroke не задано значение, они пытаются унаследовать его от родителя. Это позволяет задавать цветовую схему для всей группы элементов (<g>) одним атрибутом.

<svg>
  <g fill="forestgreen" fill-opacity="0.7">
    <!-- Оба круга унаследуют полупрозрачный зеленый fill -->
    <circle cx="50" cy="50" r="40"/>
    <circle cx="120" cy="50" r="40" fill-opacity="0.3"/> <!-- Переопределит непрозрачность только для этого круга -->
  </g>
</svg>

Они определяются в секции <defs> и затем используются через fill="url(#id)" или stroke="url(#id)". Линейные градиенты можно направлять под любым углом, радиальные — создавать сложные переходы из одного центра. Узоры позволяют заполнять фигуры любым повторяющимся содержимым, включая другие SVG-фигуры или растровые изображения. Это открывает путь к созданию текстур, фонов и сложных декоративных элементов.

<svg width="280" height="140">
  <defs>
    <radialGradient id="sphere">
      <stop offset="0%" stop-color="white"></stop>
      <stop offset="100%" stop-color="steelblue"></stop>
    </radialGradient>
    <pattern id="grid" patternUnits="userSpaceOnUse" width="20" height="20">
      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="gray" stroke-width="0.5"></path>
    </pattern>
  </defs>
  <circle cx="60" cy="70" r="60" fill="url(#sphere)"></circle>
  <rect x="130" y="2" width="130" height="130" fill="url(#grid)" stroke="black"></rect>
</svg>

Это позволяет создавать интерактивные игрушки, индикаторы загрузки, иллюстрации, реагирующие на действия пользователя. Особенно эффектно выглядит анимация свойства stroke-dashoffset для создания эффекта «прорисовки» контура. CSS-анимации часто более удобны и интегрированы в общий процесс разработки.

<style>
  .pulse {
    fill: coral;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0% { fill-opacity: 1; }
    50% { fill-opacity: 0.3; }
    100% { fill-opacity: 1; }
  }
</style>
<svg width="100" height="100"><circle class="pulse" cx="50" cy="50" r="50"/></svg>

<style>
#drawMe {
	stroke-dasharray: 6;
	stroke-dashoffset: 1000;
	animation: draw 50s linear infinite;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}
</style>
<svg width="280" height="100" viewBox="0 0 272.63 92.75">  
  <path id="drawMe" fill="none" stroke="black" stroke-width="2" d="M.45.22c14.27,29.42,26.34,35.74,34.83,35.92,12.07.26,16.62-11.89,30.08-11.8,17.63.12,20.07,21.01,37.47,26.17,25.27,7.49,40.63-30.51,89.19-40.54,8.6-1.78,41.87-8.65,62.8,9.75,18.22,16.01,20.3,45.18,14.25,48.23-5.83,2.94-15.37-20.29-33.78-20.52-19.86-.25-26.53,26.6-44.86,25.66-17.82-.92-23.95-26.94-36.42-25.14-13.83,1.99-9.21,34.41-26.39,42.59-26.75,12.74-72.14-49.58-102.91-35.92-7.37,3.27-11.5,9.84-13.72,14.37"></path>
</svg>

Например, порядок определения градиентов и узоров в <defs> важен, если они ссылаются друг на друга. Также стоит помнить о влиянии свойства stroke на bounding box элемента: толстая обводка может выходить за видимые границы и обрезаться, если не предусмотреть дополнительное пространство.

Полезные лайфхаки

1. Оптимизация: используйте currentColor для иконок, чтобы они автоматически подстраивались под цвет текста.
2. Интерактивность: меняйте fill и stroke по :hover или :active в CSS для создания кнопок и интерактивных карт.
3. Контроль заливки открытых путей: свойство fill-rule (nonzero или evenodd) определяет, как будет заливаться сложный самопересекающийся контур.
4. Проблема обрезки: если толстый stroke обрезается, увеличьте viewBox или задайте элементу большие явные размеры.
5. Наследование и сброс: иногда нужно явно указать fill="none", чтобы «сбросить» унаследованное значение из внешнего CSS.

/* Иконка, подстраивающаяся под цвет текста */
.icon {
  color: inherit; /* Цвет унаследует от родителя */
}
.icon svg {
  fill: currentColor; /* Внутренности SVG примут этот цвет */
  stroke: currentColor; /* Контур также примет этот цвет */
}

/* Интерактивная кнопка */
.button-svg {
  fill: #ccc;
  stroke: #999;
  transition: fill 0.3s;
}
.button-svg:hover {
  fill: #ff6b6b;
  stroke: #d32f2f;
}

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

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

Мечтаете превратить макет в живой, работающий сайт? Наш онлайн-курс по вёрстке от практикующих разработчиков студии даст вам мощный старт, а если вам нужен готовый результат здесь и сейчас — наша команда создаст для вас продающий сайт. Начните с обучения или сразу получите идеальный инструмент для вашего бизнеса.