Логотип Workflow

Article

Svg Introduction

Полный гид по SVG: Основы, применение и вставка

SVG (Scalable Vector Graphics) — это язык разметки на основе XML для описания двухмерной векторной графики. Браузер не просто показывает картинку, он «читает» код и отрисовывает изображение математически.

1. Векторная графика vs Растровая

Чтобы понять суть SVG, нужно сравнить его с привычными форматами (JPEG, PNG).

Растровая графика (JPEG, PNG, GIF): Состоит из сетки пикселей. У изображения есть фиксированное разрешение. При увеличении пиксели растягиваются, появляется «зернистость» и размытие.

Муровей
Оригинал (JPG)
Муровей размытый
При увеличении

Векторная графика (SVG): Состоит из геометрических примитивов (точки, линии, кривые, многоугольники), описанных математическими формулами.

Почему SVG масштабируется без потерь?

Поскольку изображение описано формулами (например: «нарисуй круг радиусом 50 в координатах 10,10»), браузер перерисовывает его заново при любом изменении размера экрана. Это обеспечивает идеальную четкость на любых дисплеях, включая Retina, и при любом зуме.

Муровей
Оригинал (SVG)
Муровей размытый
Растянули 100x

2. Типичные кейсы использования

SVG — стандарт де-факто для современной веб-разработки:

  • Иконки: Самый частый кейс. Они легкие, четкие и их цвет можно менять через CSS.
  • Иллюстрации: Flat-графика и рисованные изображения (логотипы, баннеры).
  • Графики и диаграммы: Библиотеки вроде D3.js генерируют SVG для визуализации данных.
  • Анимации: SVG можно анимировать через CSS или JavaScript (изменение формы, движение по пути).
  • UI-элементы: Спиннеры загрузки, сложные формы кнопок, разделители секций (волны).

3. Структура SVG-документа

Так как SVG — это XML, его можно открыть в текстовом редакторе.

Базовый пример:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Это комментарий: Рисуем синий круг -->
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>

Результат:

Text

Ключевые элементы:

  • <svg>: Корневой тег.
  • width / height: Размеры области просмотра на экране.
  • viewBox="min-x min-y width height": Самый важный атрибут. Он определяет внутреннюю систему координат и пропорции. Позволяет контенту масштабироваться (быть адаптивным).
  • xmlns: Пространство имен (обязательно для внешних файлов, опционально при inline-вставке в HTML5).
  • Примитивы: <rect> (прямоугольник), <circle> (круг), <text> (текст), <path> (сложная кривая, основной инструмент для иконок).

4. Способы вставки на веб-страницу

Выбор метода зависит от того, нужно ли вам управлять стилями SVG.

A. Inline SVG (Вставка кода в HTML)

Код <svg>...</svg> вставляется прямо в разметку страницы.

  • Плюсы: Полный контроль через CSS (изменение fill при :hover) и JS. Нет лишнего HTTP-запроса.
  • Минусы: «Раздувает» HTML-код, не кэшируется браузером как отдельный файл.

B. Тег <img>

<img src="icon.svg" alt="Иконка">
  • Плюсы: Кэшируется, код чистый.
  • Минусы: Нельзя менять стили (цвет) внутри SVG через CSS страницы. Нет интерактивности.

C. CSS background-image

.icon { background-image: url('icon.svg'); }
  • Плюсы: Хорошо для декоративных элементов.
  • Минусы: Нельзя управлять внутренними стилями, плохо для SEO (нет alt-текста).

D. <object> или <iframe>

<object data="image.svg" type="image/svg+xml"></object>
  • Плюсы: Позволяет загружать внешний файл, но сохраняет возможность скриптового взаимодействия.
  • Минусы: Редко используется, имеет особенности с кросс-доменной безопасностью.

5. Ограничения и недостатки

Несмотря на мощь, SVG подходит не для всего:

Сложность сцен / Производительность:

Если в SVG тысячи мелких объектов (например, подробная карта мира или сложный CAD-чертеж), браузеру тяжело рассчитывать и перерисовывать DOM-узлы. Это вызывает лаги при скролле или анимации. Для таких задач лучше подходит <canvas> (растровая отрисовка на лету).

Не для фото:

Векторизация фотографии создаст файл гигантского размера с миллионами контуров. Для фото всегда используйте JPG/WebP.

Безопасность (XSS):

SVG может содержать встроенный JavaScript. Если вы позволяете пользователям загружать свои SVG-файлы на сервер, злоумышленник может встроить туда вредоносный скрипт.

Решение: Всегда «санитизируйте» (очищайте) SVG на бэкенде или используйте их только через тег <img> (там скрипты блокируются).

Quiz

Проверьте, что вы усвоили

Авторизуйтесь чтоб пройти тесты