SVG-графика

SVG (Scalable Vector Graphics) — формат векторной графики. Обычная картинка JPEG или PNG состоит из точек-пикселей и при увеличении расплывается. SVG описывает рисунок фигурами — «круг такого радиуса, линия отсюда досюда», — поэтому он чёткий при любом размере. Иконки, логотипы и простые схемы почти всегда делают в SVG.

Первый рисунок

SVG можно написать прямо в HTML тегом <svg>. Внутрь кладут фигуры — например, круг <circle>:

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

cx и cy — координаты центра, r — радиус, fill — цвет заливки. Отсчёт идёт от левого верхнего угла: ось x вправо, ось y вниз.

Фигуры

<svg width="300" height="100">
  <rect x="10" y="10" width="80" height="80" rx="10" fill="gold" />
  <polygon points="150,10 190,90 110,90" fill="tomato" />
  <line x1="220" y1="10" x2="290" y2="90" stroke="black" stroke-width="4" />
</svg>

Фигуры рисуются в порядке написания: следующая ложится поверх предыдущей.

viewBox и масштаб

Атрибут viewBox задаёт собственную систему координат рисунка: "0 0 100 100" значит «рисунок размером 100 на 100 единиц». Дальше width можно менять как угодно — рисунок растянется целиком:

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

Код фигуры один и тот же, а круги разного размера — и оба чёткие.

Обводка

fill закрашивает фигуру изнутри, stroke — цвет обводки, stroke-width — её толщина. fill="none" оставляет фигуру пустой:

<svg viewBox="0 0 200 80" width="200">
  <circle cx="40" cy="40" r="30" fill="none" stroke="royalblue" stroke-width="6" />
  <rect x="100" y="10" width="80" height="60" fill="lavender" stroke="purple" stroke-width="2" stroke-dasharray="6 4" />
</svg>

stroke-dasharray делает пунктир: 6 единиц черта, 4 — промежуток.

Контур path

<path> рисует фигуру любой формы. Атрибут d содержит команды: M — перейти в точку, L — провести линию, Q — кривая, Z — замкнуть контур:

<svg viewBox="0 0 120 100" width="120">
  <path d="M 10 90 L 60 10 L 110 90 Z" fill="none" stroke="green" stroke-width="4" />
  <path d="M 20 60 Q 60 0 100 60" fill="none" stroke="orange" stroke-width="4" />
</svg>

Вручную path пишут редко: сложные иконки рисуют в графическом редакторе (Figma, Inkscape) и экспортируют в SVG.

Иконки цвета текста

Значение currentColor берёт цвет текста родителя. Иконка внутри ссылки или кнопки автоматически красится вместе с текстом:

<p style="color: crimson;">
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path d="M12 21 L3 12 A5 5 0 0 1 12 6 A5 5 0 0 1 21 12 Z" fill="currentColor" />
  </svg>
  В избранном
</p>

SVG можно хранить и отдельным файлом .svg и подключать как обычную картинку: <img src="logo.svg" alt="Логотип">. Но тогда менять его цвета из CSS страницы не получится.

Частая ошибка

Без viewBox рисунок не масштабируется: изменили width — и часть рисунка просто обрезалась:

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

Слева виден только уголок круга, справа — весь круг. Всегда указывайте viewBox у своих SVG.