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

SVG (Scalable Vector Graphics) представляет собой XML-документ, в котором каждая графическая сущность описывается тегами и атрибутами. Любой SVG-файл начинается с корневого элемента <svg>, внутри которого располагаются все остальные элементы сцены.

<svg width="300" height="200" viewBox="0 0 300 200">
    <!-- Содержимое -->
</svg>

Ключевые атрибуты корневого элемента:

  • width, height — физические размеры области отображения
  • viewBox — система координат (xmin, ymin, width, height)
  • xmlns — пространство имён (обычно указывается автоматически)

Система координат и viewBox

Атрибут viewBox задаёт логическую систему координат, независимую от реального размера SVG.

viewBox="0 0 300 200"

Это означает:

  • начало координат в точке (0, 0)
  • ширина 300 единиц
  • высота 200 единиц

Особенности:

  • координата (0,0) находится в левом верхнем углу
  • ось X направлена вправо
  • ось Y направлена вниз

Связь viewBox с width/height позволяет масштабировать изображение без потери качества.

Основные графические элементы

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

Простейшие элементы:

<rect x="10" y="10" width="100" height="50" />
<circle cx="50" cy="50" r="40" />
<line x1="0" y1="0" x2="100" y2="100" />

Атрибуты:

  • x, y — позиция
  • cx, cy — центр (для окружностей)
  • r — радиус
  • width, height — размеры

Путь (path) как универсальный элемент

Элемент <path> — основа сложной графики и ключевой элемент при работе с Vivus.

<path d="M10 10 L100 100" />

Атрибут d содержит команды:

  • M — перемещение (move)
  • L — линия (line)
  • C — кривая Безье
  • Z — замыкание пути

Пример сложного пути:

<path d="M50 50 C70 10, 120 10, 140 50" />

Почему это важно для Vivus:

  • библиотека анимирует именно пути (path)
  • длина пути вычисляется автоматически
  • создаётся эффект «рисования»

Группировка элементов

Для структурирования используются контейнеры <g>:

<g id="group1">
    <rect x="10" y="10" width="50" height="50" />
    <circle cx="80" cy="80" r="20" />
</g>

Назначение:

  • логическая группировка
  • применение общих стилей
  • удобство анимации

Стилизация SVG

Стили могут задаваться несколькими способами:

Атрибуты

<rect fill="red" stroke="black" stroke-width="2" />

Встроенные стили

<rect style="fill: red; stroke: black;" />

CSS

<style>
    .my-shape {
        fill: blue;
        stroke: black;
    }
</style>

<rect class="my-shape" />

Основные свойства:

  • fill — заливка
  • stroke — обводка
  • stroke-width — толщина линии
  • opacity — прозрачность

Определения и повторное использование

SVG поддерживает блок <defs> для хранения шаблонов:

<defs>
    <circle id="dot" r="5" />
</defs>

<use href="#dot" x="10" y="10" />
<use href="#dot" x="50" y="50" />

Преимущества:

  • уменьшение дублирования
  • повышение производительности
  • удобство масштабирования

Иерархия документа

SVG-документ представляет собой дерево:

svg
 ├── defs
 ├── g
 │    ├── path
 │    └── rect
 └── circle

Особенности:

  • порядок элементов влияет на наложение (z-index)
  • элементы ниже перекрывают предыдущие
  • вложенность влияет на трансформации

Трансформации

Любой элемент может быть преобразован:

<rect x="10" y="10" width="50" height="50" transform="rotate(45)" />

Виды трансформаций:

  • translate(x, y) — перемещение
  • scale(s) — масштабирование
  • rotate(angle) — вращение
  • skewX, skewY — наклон

Комбинирование:

transform="translate(50,50) rotate(30)"

Работа с длиной пути

Для анимации Vivus критично понимание длины пути:

<path d="M10 10 L100 100" />

В браузере длина вычисляется через:

path.getTotalLength()

Использование:

  • управление анимацией штриха
  • создание эффекта рисования

Stroke и его параметры

Vivus активно использует свойства обводки:

<path
    d="M10 10 L100 100"
    stroke="black"
    stroke-width="2"
    fill="none"
/>

Ключевые параметры:

  • stroke-dasharray — шаблон штриха
  • stroke-dashoffset — смещение

Именно эти свойства изменяются для создания анимации.

Минимальный SVG для Vivus

<svg viewBox="0 0 200 200">
    <path
        d="M10 10 L190 10 L190 190 L10 190 Z"
        stroke="black"
        fill="none"
    />
</svg>

Требования:

  • наличие <path>
  • отсутствие заливки (fill="none")
  • корректная геометрия

Встраивание SVG в HTML

Inline SVG

<svg>...</svg>

Плюсы:

  • доступ через DOM
  • возможность анимации Vivus

Через <img>

<img src="image.svg">

Минусы:

  • нет доступа к DOM
  • Vivus не работает

Через <object>

<object data="image.svg"></object>

Частично доступно, но сложнее в управлении.

Подготовка SVG для анимации

Перед использованием Vivus структура должна быть оптимизирована:

  • преобразование фигур в <path>
  • удаление лишних атрибутов
  • упрощение кривых
  • корректная группировка

Инструменты:

  • редакторы (Illustrator, Figma)
  • оптимизаторы (SVGO)

Особенности структуры для Vivus

Vivus проходит по DOM SVG и анимирует пути в порядке их следования.

Важно:

  • порядок <path> определяет порядок анимации
  • вложенность влияет на синхронизацию
  • группы <g> могут использоваться для логики

Пример:

<svg>
    <path id="line1" d="..." />
    <path id="line2" d="..." />
</svg>

Анимация:

  1. line1
  2. line2

Влияние структуры на производительность

  • меньшее количество узлов — быстрее рендеринг
  • упрощённые пути — быстрее вычисление длины
  • отсутствие лишних групп — быстрее обход DOM

Типичные ошибки

  • использование fill вместо stroke
  • отсутствие <path> (например, только <rect>)
  • сложные трансформации без учёта координат
  • вложенные SVG внутри SVG

Роль структуры в управлении анимацией

Vivus не просто отображает SVG — он интерпретирует его структуру как последовательность действий:

  • каждый <path> — отдельный шаг
  • длина пути — длительность
  • порядок — сценарий анимации

Поэтому структура SVG фактически становится сценарием визуального воспроизведения.

Оглавление