Стилизация SVG: работа с векторными изображениями через CSS

Зачем стилизовать SVG через CSS? 🌟

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

🔥 Главный плюс: Один SVG-файл можно перекрашивать под разные темы сайта (светлая/тёмная) без загрузки новых изображений!

Как подключить SVG к HTML?

Есть 3 способа, но для стилизации подходят только два:

1. Инлайн (встроенный код SVG прямо в HTML)

<svg width="100" height="100" viewBox="0 0 100 100">
   <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Плюсы: Полный доступ к элементам через CSS/JS.
Минусы: Увеличивает размер HTML-файла.

2. Через <object> или <iframe>

<object data="image.svg" type="image/svg+xml"></object>

Плюсы: SVG подгружается отдельно, можно кешировать.
Минусы: Стилизация возможна только через внешний CSS, если SVG содержит inline-стили — придётся перезаписывать их с !important.

❗ Способ, который НЕ подходит для стилизации: <img src="image.svg">. Такой SVG ведёт себя как обычная картинка — CSS на него не подействует.

Основные свойства CSS для SVG 🎨

1. Цвет и заливка

fill — аналог background-color для SVG-элементов.
stroke — цвет обводки.
stroke-width — толщина обводки.

circle {
  fill: #3498db;
  stroke: #2c3e50;
  stroke-width: 3px;
}

2. Анимация

SVG отлично работает с @keyframes и transition:

rect {
  fill: #e74c3c;
  transition: fill 0.3s ease;
}

rect:hover {
  fill: #9b59b6;
}

3. Градиенты и паттерны

Градиенты задаются прямо в SVG или через CSS:

<svg>
  <linearGradient id="myGradient">
    <stop offset="0%" stop-color="#f39c12" />
    <stop offset="100%" stop-color="#e74c3c" />
  </linearGradient>
  <rect fill="url(#myGradient)" width="100" height="100" />
</svg>

Практический пример: Иконка-гамбургер 🍔

Создадим интерактивную иконку меню, которая меняет цвет и форму при наведении:

<svg class="menu-icon" width="40" height="40" viewBox="0 0 40 40">
  <rect class="bar top" x="5" y="10" width="30" height="3" rx="1.5" />
  <rect class="bar middle" x="5" y="19" width="30" height="3" rx="1.5" />
  <rect class="bar bottom" x="5" y="28" width="30" height="3" rx="1.5" />
</svg>

.menu-icon {
  cursor: pointer;
}

.bar {
  fill: #333;
  transition: all 0.3s ease;
}

.menu-icon:hover .bar {
  fill: #e74c3c;
}

.menu-icon:hover .top {
  transform: translateY(9px) rotate(45deg);
}

.menu-icon:hover .middle {
  opacity: 0;
}

.menu-icon:hover .bottom {
  transform: translateY(-9px) rotate(-45deg);
}

💡 Совет: Для сложных анимаций используйте transform вместо top/left — это работает быстрее!

Как стилизовать SVG, если он подключён через `<object>`?

Добавьте в сам SVG-файл ссылку на внешний CSS:

<?xml-stylesheet type="text/css" href="styles.css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- Ваши элементы -->
</svg>

Или используйте JavaScript для динамической подгрузки стилей:

document.querySelector('object').addEventListener('load', function() {
  const svgDoc = this.getSVGDocument();
  const style = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'style');
  style.textContent = 'rect { fill: blue !important; }';
  svgDoc.documentElement.appendChild(style);
});

Итоги: Что запомнить?

SVG — вектор, поэтому его можно стилизовать, масштабировать и анимировать без потери качества.
Для стилизации не используйте <img>, только инлайн-SVG или <object>.
Основные CSS-свойства: fill, stroke, stroke-width.
Анимации работают через transition и @keyframes.

Попробуйте применить эти техники в своём проекте — и SVG станет вашим любимым инструментом! 🚀