SVG: векторная графика для веба

SVG — одна из тех технологий, которые снаружи кажутся простыми — это просто формат для рисования, правда? — но при более глубоком изучении раскрываются больше, чем почти любой другой формат в арсенале разработчика или дизайнера. SVG-файлы масштабируются бесконечно без потери качества, практически ничего не весят для простой графики, могут стилизоваться через CSS, анимироваться с помощью JavaScript или CSS-переходов и встраиваться непосредственно в HTML. Правильное понимание SVG меняет взгляд на графику в вебе.

Вы можете просматривать, инспектировать и оптимизировать любой SVG-файл с помощью инструмента SVG BrowseryTools — бесплатно, без регистрации, всё работает в браузере.

Что такое SVG?

SVG расшифровывается как Scalable Vector Graphics (масштабируемая векторная графика). В отличие от JPEG, PNG или WebP — которые хранят изображения как сетки цветных пикселей (растровые изображения) — SVG хранит изображения как математические описания фигур. Окружность описывается как центральная точка и радиус. Контур описывается как последовательность команд рисования: переместиться в эту точку, провести линию до той точки, провести кривую через эти контрольные точки, закрыть контур.

SVG — это XML-формат, то есть каждый SVG-файл является простым текстом, читаемым человеком и структурированным как дерево вложенных элементов. Откройте любой SVG в текстовом редакторе — и вы увидите понятную разметку, а не бинарный блок. Это имеет важные практические последствия: SVG-файлы могут генерироваться программно, изменяться инструментами обработки текста, отслеживаться в системах контроля версий и встраиваться непосредственно в HTML без какой-либо предварительной обработки.

Формат является стандартом W3C, сопровождаемым наряду с HTML и CSS. Каждый современный браузер имеет встроенный полноценный движок рендеринга SVG.

Почему SVG лучше растровых форматов для иконок и иллюстраций

Решающее преимущество SVG перед растровыми форматами для иконок, логотипов и иллюстраций — независимость от разрешения. Растровая иконка, созданная при 32×32 пикселях, будет выглядеть размыто на дисплее Retina, который рендерит при 2× или 3× физических пикселей на CSS-пиксель. Чтобы исправить это, нужно либо экспортировать несколько вариантов разрешения (@1x, @2x, @3x), увеличить исходное разрешение (больше файлов, больше памяти), либо использовать image-set в CSS. С SVG вы создаёте графику один раз, и она выглядит идеально при любом размере, на любом дисплее, навсегда.

Размер файла — другое главное преимущество для простой графики. Простая иконка — галочка, стрелка, «бургерное» меню — может быть описана в SVG-файле объёмом 200–500 байт. Эквивалентный PNG при 2× разрешении Retina может занимать 2–5 КБ. При 3× — ещё больше. Когда интерфейс содержит 50 иконок, разница между 50 оптимизированными SVG (всего ~20 КБ) и 50 PNG-наборами (всего ~300+ КБ) значительна.

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

Анатомия SVG: основные элементы

Минимальный SVG-файл имеет следующую структуру:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#3b82f6" />
  <path d="M8 12 L12 16 L16 8" stroke="white" stroke-width="2" fill="none" />
</svg>

Ключевые элементы и атрибуты для понимания:

• viewBox — определяет внутреннюю систему координат. viewBox="0 0 24 24" означает, что пространство рисования простирается от (0,0) до (24,24). SVG затем может рендериться при любом фактическом размере — 16×16, 32×32, 200×200 — и браузер масштабирует систему координат соответственно. Именно этот механизм обеспечивает независимость от разрешения.
• path — самый мощный SVG-элемент. Атрибут d содержит команды рисования: M (переместиться в), L (линия до), C (кубическая кривая Безье), A (дуга), Z(закрыть контур). Почти любую фигуру можно выразить как путь.
• circle, rect, ellipse, line, polygon — удобные элементы для распространённых фигур. <circle> принимает cx, cy и r. <rect> принимает x, y, width и height, плюс необязательный rx для закруглённых углов.
• text — SVG может рендерить типографский текст, масштабирующийся вместе с изображением и остающийся выделяемым и доступным, в отличие от текста, растеризованного в изображение.
• g (группа) — группирует дочерние элементы, чтобы трансформации, стили и прозрачность можно было применять ко всей группе сразу.
• defs и use — определяют переиспользуемые элементы один раз и ссылаются на них многократно с помощью <use>. Основа для систем иконок, использующих единый SVG-спрайт.

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

SVG-элементы являются частью DOM при встраивании SVG в HTML. Это означает, что CSS может обращаться к ним напрямую с использованием тех же селекторов, что и для HTML-элементов. Вы можете менять цвет заливки, ширину обводки и прозрачность при наведении, в тёмном режиме или в ответ на любое изменение состояния:

/* Обращение к SVG-элементам через CSS */
.icon-check circle {
  fill: #22c55e;
  transition: fill 0.2s ease;
}

.icon-check:hover circle {
  fill: #16a34a;
}

/* Поддержка тёмного режима */
@media (prefers-color-scheme: dark) {
  .icon-check circle { fill: #4ade80; }
}

CSS-анимации и переходы работают на SVG-свойствах. Трюк с stroke-dasharrayи stroke-dashoffset — анимация пути от невидимого к видимому путём манипуляции отображаемой частью пунктирной обводки — создаёт эффект «рисования», видимый на многих индикаторах загрузки и иллюстрациях онбординга. SVG также имеет собственные элементы <animate> и <animateTransform>(анимация SMIL), хотя CSS- и JavaScript-анимация обычно предпочтительнее с точки зрения поддерживаемости.

Использование currentColor в качестве значения заливки заставляет SVG-иконку автоматически наследовать цвет текста родительского элемента, позволяя одной иконке адаптироваться к любому цветовому контексту без изменений.

Оптимизация SVG с помощью SVGO

SVG-файлы, экспортированные из таких инструментов дизайна, как Figma или Illustrator, содержат много лишнего: метаданные редактора, избыточные атрибуты, обёртки групп без эффекта, координаты с плавающей точкой до восьми знаков после запятой, атрибуты id, сгенерированные внутренней системой узлов инструмента. Для простой иконки это может утраивать или учетверять размер файла по сравнению с ручной оптимизацией.

SVGO (SVG Optimizer) — стандартный инструмент для удаления этого балласта. Он применяет настраиваемый набор преобразований: схлопывание вложенных групп, удаление невидимых элементов, округление координат до разумной точности, объединение избыточных путей, удаление метаданных и комментариев и многое другое. Типичный проход SVGO уменьшает размер иконочных SVG на 30–60% без визуальных изменений.

Инструмент SVG BrowseryTools применяет SVG-оптимизацию в браузере, предоставляя оптимизированный результат без установки инструментов командной строки.

Встроенный SVG vs внешний файл vs фон CSS

Существует три основных способа включить SVG в веб-страницу, у каждого свои компромиссы:

• Встроенный SVG — разметка SVG встроена непосредственно в HTML. Даёт полный доступ CSS и JavaScript к каждому элементу внутри SVG. Лучший вариант для иконок с эффектами наведения, сменой цвета или анимацией. Не может кэшироваться браузером отдельно.
• Внешний SVG-файл через <img> — SVG является отдельным файлом, на который ссылаются через <img src="icon.svg">. Браузер может кэшировать файл. Прост в использовании. Но CSS родительской страницы не может обращаться внутрь SVG, и JavaScript не может манипулировать его содержимым.
• CSS background-image — SVG указан как CSS-фон. Работает для чисто декоративной графики. SVG также можно встроить как data URI в CSS, полезно для небольших иконок в таблицах стилей компонентов. CSS не может изменять стили элементов внутри SVG.

SVG-спрайты — единый SVG-файл, содержащий все иконки, определённые в блоках <defs>, на которые ссылаются через <use href="sprite.svg#icon-name"> — предлагают хороший баланс: один кэшируемый сетевой запрос для всех иконок, с возможностью DOM-манипуляции для каждой иконки в большинстве современных браузеров.

Типичные подводные камни SVG: XSS через SVG

SVG поддерживает встроенные скрипты, обработчики событий и ссылки на внешние ресурсы, что делает его потенциальным вектором атаки межсайтового скриптинга (XSS), если загруженные пользователями SVG-файлы отображаются в контексте браузера. SVG-файл, содержащий <script>alert(document.cookie)</script>, выполнит этот скрипт, если браузер рендерит SVG как часть страницы.

Правила для безопасной обработки загруженных пользователями SVG:

• Никогда не встраивайте загруженные пользователями SVG непосредственно в HTML. Встраивайте только SVG, которые вы контролируете.
• Если необходимо отображать загруженные пользователями SVG, размещайте их на отдельном изолированном источнике и отображайте в теге <img> или в изолированном <iframe>. Тег <img> не выполняет скрипты в SVG.
• Санируйте загруженные пользователями SVG, прогоняя их через sanitizer (DOMPurify с конфигурацией SVG) перед хранением или отображением.
• Установите заголовок Content Security Policy для ограничения источников скриптов на страницах, отображающих SVG.

Конвертация SVG в PNG

Ряд контекстов не поддерживает SVG: старые почтовые клиенты, определённые CMS-платформы, некоторые конвейеры обработки изображений, требования к иконкам приложений для iOS и Android, а также изображения для Open Graph превью. В этих случаях нужно экспортировать SVG в растровый PNG.

Поскольку SVG масштабируется без потерь, вы можете экспортировать в PNG любого размера. Для иконок приложений это означает экспорт из одного SVG-источника в 1024×1024 и получение всех меньших размеров из него. Для Retina-использования в вебе экспортируйте в 2× или 3× от CSS-размера отображения.

Инструмент SVG BrowseryTools может рендерить SVG в PNG при выбранном разрешении, выполняя конвертацию в браузере без загрузки на сервер. Удобно, когда у вас есть SVG из инструмента дизайна и нужен PNG для контекста, не принимающего SVG.