Координатная система и viewBox

SVG использует двумерную декартову систему координат, в которой каждая точка определяется значениями по осям X (горизонталь) и Y (вертикаль). В отличие от классической математической модели:

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

Это важно учитывать при работе с анимациями, поскольку направление движения и расчёт траекторий будут отличаться от привычных математических представлений.

Каждый SVG-документ имеет собственную систему координат, которая задаётся атрибутами:

  • width
  • height
  • viewBox

Абсолютные и относительные координаты

В SVG координаты могут быть:

  • Абсолютными — задаются напрямую (например, x="100" y="50")
  • Относительными — используются в path-командах (например, l, m, c вместо L, M, C)

В контексте библиотеки Vivus это особенно важно, поскольку она анимирует именно пути (path), а значит, корректность координат влияет на внешний вид анимации.

Пример пути:

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

Здесь:

  • M10 10 — перемещение в точку (10, 10)
  • L100 100 — линия к точке (100, 100)

Атрибут viewBox

Атрибут viewBox определяет, какая область координат SVG отображается внутри контейнера.

Синтаксис:

viewBox="minX minY width height"

Пример:

<svg viewBox="0 0 200 100">

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

  • отображается область от (0,0)
  • ширина = 200 единиц
  • высота = 100 единиц

Ключевые свойства viewBox:

  • задаёт внутреннюю систему координат
  • позволяет масштабировать SVG без потери качества
  • обеспечивает адаптивность

Связь viewBox и размеров SVG

SVG может иметь фиксированные размеры:

<svg width="400" height="200" viewBox="0 0 200 100">

В этом случае происходит масштабирование:

  • 1 единица внутри viewBox = 2 пикселя по горизонтали
  • 1 единица внутри viewBox = 2 пикселя по вертикали

Это создаёт масштабируемую систему, где координаты остаются логическими, а не привязанными к пикселям.

PreserveAspectRatio

Атрибут preserveAspectRatio управляет тем, как SVG вписывается в контейнер при несоответствии пропорций.

Пример:

preserveAspectRatio="xMidYMid meet"

Основные режимы:

  • meet — сохраняет пропорции, добавляя пустые области
  • slice — заполняет контейнер, обрезая лишнее
  • none — игнорирует пропорции (растягивает)

Для анимаций Vivus чаще используется meet, чтобы избежать искажений линий.

Влияние viewBox на анимацию Vivus

Библиотека Vivus анимирует SVG через постепенное прорисовывание линий (stroke-dasharray и stroke-dashoffset). При этом:

  • длина пути вычисляется в координатах SVG
  • скорость анимации зависит от длины path

Если viewBox задан некорректно:

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

Нормализация координат

Рекомендуется использовать единый viewBox, например:

viewBox="0 0 1000 1000"

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

  • удобство расчётов
  • предсказуемость анимаций
  • лёгкая адаптация под разные размеры

Центрирование графики

Чтобы разместить объект по центру:

  1. определить размеры viewBox
  2. вычислить центр:
centerX = width / 2
centerY = height / 2
  1. сместить элементы относительно центра

Пример:

<circle cx="500" cy="500" r="100" />

Для viewBox="0 0 1000 1000" это центр.

Трансформации и система координат

SVG поддерживает трансформации:

  • translate(x, y)
  • scale(s)
  • rotate(angle)
  • matrix(...)

Пример:

<g transform="translate(100, 50)">
  <path d="M0 0 L100 0" />
</g>

Это сдвигает систему координат внутри группы <g>.

Vivus учитывает трансформации, но:

  • сложные матрицы могут повлиять на длину пути
  • рекомендуется минимизировать вложенные трансформации

Работа с path и длиной линий

Vivus использует метод:

path.getTotalLength()

Длина зависит от:

  • координат
  • масштаба (viewBox)
  • трансформаций

Пример:

<path d="M0 0 L100 0" />

Длина = 100 единиц

Если изменить viewBox:

viewBox="0 0 200 100"

визуально линия станет короче, но логическая длина останется 100.

Адаптивные SVG и Vivus

При использовании адаптивных SVG:

<svg viewBox="0 0 500 500" width="100%">

важно:

  • Vivus работает с внутренними координатами
  • изменение размеров контейнера не влияет на саму анимацию
  • сохраняется пропорциональность

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

1. Отсутствие viewBox

<svg width="500" height="500">

Проблемы:

  • отсутствие масштабируемости
  • некорректное отображение на разных экранах

2. Несоответствие пропорций

viewBox="0 0 100 100"
width="500"
height="200"

Результат:

  • искажение анимации

3. Слишком большие координаты

<path d="M10000 10000 L20000 20000" />

Проблемы:

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

Практика: подготовка SVG для Vivus

Оптимальная структура:

<svg viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
  <path d="M50 50 L450 50 L450 450 L50 450 Z" />
</svg>

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

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

Связь координат и режимов анимации Vivus

Vivus поддерживает режимы:

  • delayed
  • sync
  • oneByOne

Влияние координат:

  • при sync длины путей определяют равномерность
  • при oneByOne важен порядок и масштаб
  • при delayed влияет относительная длина каждого path

Оптимизация для сложных SVG

Рекомендации:

  • использовать одинаковый масштаб (viewBox)
  • упрощать пути (минимум точек)
  • избегать вложенных g с трансформациями
  • конвертировать всё в path (через редакторы)

Интеграция с редакторами

Графические редакторы (например, Illustrator, Figma) экспортируют SVG с собственными координатами:

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

Перед использованием в Vivus:

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

Итоговая схема взаимодействия

  1. viewBox задаёт систему координат
  2. path описывает геометрию
  3. Vivus вычисляет длину линий
  4. анимация строится на основе этих длин

Корректная настройка координатной системы обеспечивает:

  • точную анимацию
  • предсказуемую скорость
  • адаптивность интерфейса
Оглавление