Основы работы с SVG: формат, фигуры и вставка на страницу

SVG (Scalable Vector Graphics) — это открытый XML-формат для описания двумерной векторной графики. Изображение задается не пикселями, а текстовыми командами: «нарисуй прямоугольник тут», «проведи линию туда». Поэтому SVG масштабируется без потери четкости и правится как обычный код — руками, через CSS или скриптом.

Ниже разберем, чем вектор отличается от растра, из чего состоит SVG-документ, какие есть базовые фигуры и команды пути, чем viewBox отличается от width/height, три способа вставить SVG на страницу и как красить графику через CSS. Пример с генерацией SVG прогнан в песочнице, вывод в тексте — реальный.

Растр и вектор: в чем разница

Растровое изображение — это сетка пикселей. У него есть фиксированное разрешение, и при сильном увеличении видны квадратики. Фотографии хранят растром: JPEG, PNG, WebP.

Вектор описывает картинку геометрией — точками, линиями, кривыми и их параметрами (координаты, цвет, толщина). При масштабировании браузер пересчитывает геометрию заново, поэтому границы остаются четкими на любом размере.

Вывод простой: для фотографий берут растр, для иконок и логотипов — SVG. Пытаться сохранить фотопортрет в SVG бессмысленно: файл выйдет огромным, потому что придется описывать каждый оттенок геометрией.

Из чего состоит SVG-документ

Корневой элемент — тег <svg>. Внутри него лежат фигуры. Минимальный рабочий пример, который можно вставить прямо в HTML:

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" rx="12"
        fill="#e0f0ff" stroke="#0a84ff" stroke-width="4"/>
  <circle cx="60" cy="60" r="30" fill="#0a84ff"/>
</svg>

Ожидаемый результат: голубой квадрат 100×120 со скругленными углами и синей рамкой, а по центру — сплошной синий круг радиусом 30. Система координат SVG идет от левого верхнего угла: ось X вправо, ось Y вниз (не как в школьной математике, где Y растет вверх).

Атрибут xmlns объявляет пространство имен SVG — он обязателен, если файл открывается как отдельный .svg или подключается через <img>. Внутри инлайнового HTML современные браузеры его прощают, но привычка ставить xmlns избавляет от «пустой картинки» при подключении файлом.

Базовые фигуры

SVG рисуется из набора примитивов. Их достаточно для иконок и схем, а сложные контуры собирают из <path>.

<polyline> и <polygon> отличаются только замыканием: у полигона последняя точка автоматически соединяется с первой, у ломаной — нет.

Атрибут d и команды пути

<path> — самая мощная фигура: одним атрибутом d она задает любой контур. Значение d — это строка команд, где буква определяет тип операции, а числа — ее координаты. Заглавная буква — абсолютные координаты, строчная — относительные (сдвиг от текущей точки).

Треугольник через <path>:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 L 50 20 L 90 80 Z"
        fill="none" stroke="green" stroke-width="3"/>
</svg>

Читается по шагам: M 10 80 — перо в левый нижний угол; L 50 20 — линия к вершине; L 90 80 — линия к правому нижнему углу; Z — замыкание обратно в старт. Получается зеленый контур треугольника без заливки.

viewBox и размеры: не путать

Эту пару путают чаще всего, хотя они отвечают за разное.

width и height задают размер области, которую SVG занимает на странице, в CSS-пикселях. Это «сколько места картинка займет в верстке».

viewBox="min-x min-y width height" задает внутреннюю систему координат — какой кусок бесконечного холста показать в этой области. Это «в каких координатах мы рисуем».

Разведем на примере: viewBox="0 0 100 100" при width="300" означает, что мы рисуем в координатах 0..100, а браузер растягивает результат до 300 пикселей. Круг с r="50" займет всю ширину независимо от того, 100 там пикселей или 300. Именно связка «рисуем в удобных координатах — показываем в любом размере» и дает SVG масштабируемость.

Атрибут preserveAspectRatio управляет тем, что делать, если пропорции viewBox и области не совпадают: meet (по умолчанию) вписывает картинку целиком с сохранением пропорций, slice заполняет всю область, обрезая лишнее, none растягивает без сохранения пропорций.

Три способа вставить SVG на страницу

Выбор способа зависит от одной задачи: нужно ли управлять графикой из CSS и JavaScript.

Через тег <img> — самый простой способ, картинка кешируется как обычный ресурс, но перекрасить ее из CSS страницы нельзя:

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

Фоном через CSS удобно для декоративных элементов, которым не нужна интерактивность:

.hero {
  width: 300px;
  height: 200px;
  background-image: url("pattern.svg");
  background-size: cover;
  background-repeat: no-repeat;
}

Инлайн-вставка — когда графику нужно красить, менять и анимировать. Разметка <svg> становится частью DOM, и каждая фигура доступна селектору CSS и скрипту. Этот способ выбирают для иконок, которые должны наследовать цвет текста, и для анимаций.

Стилизация через CSS

У инлайнового SVG цвет задается не привычным color, а свойствами fill (заливка) и stroke (обводка). Их можно писать и атрибутом в разметке, и правилом в CSS — CSS имеет приоритет над атрибутом-презентацией.

Частый прием для иконок — заливка значением currentColor: тогда иконка наследует цвет текста родителя, и одну и ту же иконку не нужно перерисовывать под каждую тему.

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

<button style="color: #0a84ff">
  <svg class="icon" viewBox="0 0 24 24">
    <path d="M12 2 L2 22 L22 22 Z"/>
  </svg>
  Отправить
</button>

Иконка-треугольник внутри кнопки станет синей, потому что currentColor подставит color кнопки. Смените цвет текста кнопки — изменится и заливка иконки.

Генерация SVG кодом

Поскольку SVG — это текст, его удобно собирать программно: строить графики, диаграммы, повторяющиеся узоры. Соберем на JavaScript правильную пятиконечную звезду — посчитаем координаты вершин и подставим их в <polygon>:

// Точки правильной пятиконечной звезды -> строка для polygon
function starPoints(cx, cy, outer, inner, spikes) {
  const pts = [];
  const step = Math.PI / spikes;   // угол между вершинами
  let angle = -Math.PI / 2;        // старт сверху
  for (let i = 0; i < spikes * 2; i++) {
    const r = i % 2 === 0 ? outer : inner;
    const x = Math.round(cx + r * Math.cos(angle));
    const y = Math.round(cy + r * Math.sin(angle));
    pts.push(x + "," + y);
    angle += step;
  }
  return pts.join(" ");
}

const points = starPoints(50, 50, 45, 18, 5);
const svg =
  '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n' +
  '  <polygon points="' + points + '" fill="gold" stroke="black"/>\n' +
  '</svg>';

console.log(points);
console.log(svg);

Вывод программы:

50,5 61,35 93,36 67,56 76,86 50,68 24,86 33,56 7,36 39,35
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,5 61,35 93,36 67,56 76,86 50,68 24,86 33,56 7,36 39,35" fill="gold" stroke="black"/>
</svg>

Функция чередует большой и малый радиус (outer/inner) через каждую вершину — так внешние лучи и внутренние впадины звезды. Готовую строку можно записать в файл .svg или подставить в innerHTML элемента на странице. Так же строят и графики: значения данных превращают в координаты точек <polyline>.

Анимация: коротко

Инлайновый SVG анимируют двумя основными способами. Через CSS — переходами и @keyframes для свойств вроде fill, opacity, transform. Через JavaScript — меняя атрибуты фигур по таймеру или по событию, вплоть до перерисовки графика в реальном времени.

Есть и встроенная в сам формат анимация через тег <animate> (технология SMIL). Современные браузеры ее поддерживают, но исторически ее статус был неустойчивым, поэтому для надежной кроссбраузерности чаще выбирают CSS или JavaScript.

Плюсы и минусы

Про безопасность стоит помнить: SVG — это исполняемая разметка, в нее можно вложить скрипт. Файлы SVG, загружаемые пользователями, обязательно чистят (санитизируют) перед показом, иначе открывается вектор XSS-атаки.

Выводы

• SVG — открытый XML-формат векторной графики: изображение задается текстовыми командами и потому масштабируется без потери четкости.
• Графика собирается из примитивов (rect, circle, line, polygon) и универсального <path>, где контур описывает строка команд в атрибуте d.
• width/height задают размер на странице, а viewBox — внутренние координаты рисования; их связка и дает масштабируемость.
• Вставлять SVG можно тремя способами; инлайновая вставка — единственная, что открывает фигуры для CSS и JavaScript.
• Формат хорош для иконок, логотипов, схем и графиков; для фотографий берут растр.

Где применяется и что учить дальше

Основы SVG — часть базовой верстки: иконки интерфейса, логотипы, инфографика, адаптивные иллюстрации и графики на дашбордах почти всегда делаются вектором. Уверенное владение SVG идет в связке с HTML и CSS — разметкой страницы и ее стилизацией, потому что именно оттуда SVG получает размеры, цвета и анимацию.

Смежные темы: Основы работы со скриптами.

FAQ

Можно ли открыть SVG-файл в браузере напрямую? Да. Файл .svg открывается в любом современном браузере как обычная страница — достаточно перетащить его в окно или указать путь в адресной строке.

Чем SVG отличается от шрифтовых иконок? Иконочный шрифт — это символы одного цвета, ограниченные глифом. SVG-иконка может быть многоцветной, анимируемой и управляемой из CSS/JS отдельно по каждой фигуре, поэтому шрифтовые наборы вроде FontAwesome постепенно вытесняются SVG-спрайтами.

Почему мой SVG не масштабируется, а обрезается? Скорее всего у него заданы width/height, но нет viewBox. Без viewBox внутренняя система координат фиксирована, и изменение внешнего размера просто кадрирует картинку. Добавьте viewBox под размеры содержимого.