Основы SVG: элементы, координатная система, viewport

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

Любой SVG-документ начинается с корневого элемента <svg>, который определяет область отрисовки и систему координат.

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
</svg>

Ключевые атрибуты:

  • width / height — задают размеры области отображения
  • xmlns — пространство имён XML, обязательное для корректной интерпретации SVG
  • content внутри тега — графические элементы

SVG может быть встроен в HTML напрямую, а также использоваться как отдельный файл.

Viewport: область отображения

Viewport определяет видимую прямоугольную область, в которой происходит отрисовка SVG-графики. Он задаётся через атрибуты width и height.

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

Viewport можно рассматривать как «окно», через которое наблюдается внутренняя система координат SVG.

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

  • фиксированная область отображения
  • ограничивает видимую часть графики
  • задаёт начальную систему координат

При изменении размеров viewport вся графика масштабируется, если не задано иное поведение через viewBox.

ViewBox: внутренняя система координат

viewBox определяет логическую систему координат SVG, независимую от физического размера viewport.

<svg width="500" height="400" viewBox="0 0 100 100"></svg>

Формат:

viewBox = "minX minY width height"

Пример:

viewBox="0 0 100 100"

означает:

  • начало координат в точке (0, 0)
  • ширина логической системы координат 100 единиц
  • высота 100 единиц

Ключевые особенности:

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

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

SVG использует декартову систему координат с особенностями экранной ориентации:

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

Это отличает SVG от классической математической системы координат.

Пример интерпретации координат

  • (0, 0) — верхний левый угол
  • (50, 0) — середина верхней границы по X
  • (0, 50) — точка ниже начала координат
  • (100, 100) — нижний правый угол при viewBox 100×100

Масштабирование и соотношение viewport и viewBox

Соотношение viewport и viewBox определяет, как графика адаптируется к размеру контейнера.

Если:

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

то:

  • 1 единица viewBox = 2 пикселя viewport
  • графика масштабируется равномерно

При изменении размеров viewport без изменения viewBox происходит автоматическое масштабирование всех элементов.

preserveAspectRatio

Атрибут preserveAspectRatio управляет поведением масштабирования при несоответствии пропорций viewport и viewBox.

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"></svg>

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

  • meet — сохраняет пропорции, добавляя пустые поля при необходимости
  • slice — заполняет всю область, обрезая лишнее
  • none — игнорирует пропорции, растягивает содержимое

Параметры выравнивания:

  • xMin, xMid, xMax
  • YMin, YMid, YMax

Комбинация определяет положение содержимого внутри viewport.

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

SVG строится из набора примитивов, каждый из которых имеет собственные атрибуты координат и размеров.

Прямоугольник

<rect x="10" y="10" width="80" height="40" fill="blue" />

Атрибуты:

  • x, y — позиция верхнего левого угла
  • width, height — размеры
  • fill — цвет заливки

Окружность

<circle cx="50" cy="50" r="20" fill="red" />

Атрибуты:

  • cx, cy — центр окружности
  • r — радиус

Линия

<line x1="0" y1="0" x2="100" y2="100" stroke="black" />

Атрибуты:

  • x1, y1 — начальная точка
  • x2, y2 — конечная точка
  • stroke — цвет линии

Эллипс

<ellipse cx="50" cy="50" rx="30" ry="20" fill="green" />
  • rx — горизонтальный радиус
  • ry — вертикальный радиус

Текст

<text x="10" y="30" font-size="16">SVG текст</text>

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

  • координата y относится к базовой линии текста
  • поддерживаются шрифты и стили CSS

Контуры и путь (path)

Элемент <path> является наиболее гибким примитивом SVG, позволяющим описывать сложные формы.

<path d="M10 10 L90 10 L90 90 Z" fill="none" stroke="black" />

Основные команды:

  • M — перемещение (move to)
  • L — линия (line to)
  • H / V — горизонтальные и вертикальные линии
  • C — кубическая кривая Безье
  • Q — квадратичная кривая
  • Z — замыкание контура

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

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

SVG поддерживает геометрические преобразования через атрибут transform.

Перенос

<g transform="translate(50, 20)"></g>

Масштабирование

<g transform="scale(2)"></g>

Поворот

<g transform="rotate(45)"></g>

Комбинирование трансформаций выполняется последовательно слева направо.

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

Элемент <g> используется для объединения графических объектов в логическую группу.

<g fill="blue">
  <circle cx="20" cy="20" r="10" />
  <rect x="40" y="10" width="20" height="20" />
</g>

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

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

Стилизация SVG

SVG поддерживает стили через:

  • атрибуты элементов (fill, stroke)
  • CSS

Пример CSS:

<style>
  .highlight {
    fill: orange;
    stroke: black;
  }
</style>

<circle class="highlight" cx="50" cy="50" r="20" />

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

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

Взаимосвязь координат и отрисовки

Каждый SVG-элемент интерпретирует координаты относительно текущей системы координат, которая может быть изменена через:

  • viewBox
  • transform
  • вложенные <g> группы

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

Масштабируемость и независимость от разрешения

SVG-структура основана на математическом описании форм, что обеспечивает:

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

Это делает SVG основой для построения интерактивной визуализации, включая диаграммы, графики и интерфейсные элементы в библиотеках визуализации данных, таких как D3.js.

Оглавление