SVG: основы встраивания

SVG (Scalable Vector Graphics) — векторный формат изображений на основе XML, который можно встраивать в HTML несколькими способами, каждый из которых даёт разные возможности для стилизации и анимации.

Зачем нужно

SVG масштабируется без потери качества при любом разрешении — идеален для иконок, логотипов и иллюстраций. Встроенный SVG (inline) можно стилизовать через CSS и анимировать, что недоступно для PNG/JPEG. Это позволяет создавать адаптивные иконки, меняющие цвет при hover через currentColor.

Где используется

  • Иконки в интерфейсе (с изменением цвета через CSS)
  • Логотипы в хедере
  • Иллюстрации и диаграммы
  • Анимированные элементы

Способы встраивания

1. Inline SVG — максимальные возможности

<button class="btn">
  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
  </svg>
  Предупреждение
</button>

.btn {
  color: orange;
}
.btn svg {
  width: 1em;
  height: 1em;
}
/* currentColor унаследует цвет от родителя */

Плюсы: доступ к CSS, анимациям, currentColor, без лишних HTTP-запросов. Минусы: раздувает HTML, нельзя кэшировать.

2. <img> — простота, без доступа к CSS

<img src="logo.svg" alt="Логотип компании" width="120" height="40">

img[src$=".svg"] {
  max-width: 100%;
  height: auto;
}

Плюсы: кэшируется, прост в использовании. Минусы: нельзя стилизовать внутренние элементы через CSS.

3. CSS background — декоративные элементы

.icon-search {
  width: 24px;
  height: 24px;
  background-image: url('search.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

Плюсы: декоративные иконки, без разметки. Минусы: нет доступа к цвету SVG, нет alt-текста.

4. <use> — SVG-спрайты

<!-- Спрайт в конце body -->
<svg style="display: none">
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/>
  </symbol>
</svg>

<!-- Использование иконки -->
<svg class="icon" aria-hidden="true">
  <use href="#icon-star"/>
</svg>

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

currentColor — иконки, наследующие цвет

.button {
  color: #3b82f6;
}
.button:hover {
  color: #1d4ed8;
}
/* SVG внутри кнопки автоматически меняет цвет */

<button class="button">
  <svg fill="currentColor" width="16" height="16">...</svg>
  Нажми
</button>

viewBox и масштабирование

<svg viewBox="0 0 24 24" width="48" height="48">
  <!-- viewBox задаёт координатную систему, width/height — размер на странице -->
</svg>

Частые ошибки

  1. Встроенный SVG без viewBox — без viewBox SVG не масштабируется при изменении width/height
  2. fill="black" вместо fill="currentColor" — жёстко заданный цвет не даёт менять цвет иконки через CSS
  3. <img src="svg"> при необходимости анимации — для CSS-анимации SVG нужен inline или <use>

Связанные темы

Ресурсы