Title и description

В SVG-анимациях Vivus метаданные <title> и <desc> используются как базовый слой доступности и семантики, который остаётся независимым от анимационной логики библиотеки. Эти элементы встроены в структуру SVG и не влияют на визуальное отображение, однако определяют, как изображение интерпретируется вспомогательными технологиями и DOM-инструментами.

SVG-документ поддерживает два ключевых элемента описательной информации:

  • <title> — краткое имя или заголовок SVG-объекта
  • <desc> — расширенное текстовое описание содержимого

Эти элементы размещаются внутри корневого <svg> или отдельных групп <g>, формируя иерархию метаданных.

Типичная структура:

<svg width="200" height="200" viewBox="0 0 200 200">
  <title>Иконка загрузки</title>
  <desc>Анимированная окружность, обозначающая процесс загрузки данных</desc>

  <path d="..." />
</svg>

<title> интерпретируется как идентификатор объекта, тогда как <desc> предоставляет контекст. В сочетании они формируют основу доступности SVG-графики.

Поведение Vivus при работе с метаданными

Vivus оперирует SVG как с DOM-структурой, не модифицируя содержимое <title> и <desc>. Библиотека фокусируется исключительно на путях (<path>, <line>, <polyline>, <polygon>), применяя к ним анимацию через изменение stroke-атрибутов.

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

  • Метаданные не участвуют в расчёте анимационных сегментов
  • Элементы <title> и <desc> не получают CSS-анимаций
  • При поэтапном отрисовывании (type: delayed, oneByOne, sync) структура SVG сохраняется полностью
  • DOM-дерево остаётся неизменным, за исключением атрибутов stroke и stroke-dasharray у графических элементов

Vivus не перегенерирует SVG и не удаляет узлы, что делает сохранение метаданных гарантированным.

Интеграция через inline SVG и внешние файлы

Работа Vivus различается в зависимости от способа подключения SVG:

Inline SVG

При использовании встроенного SVG структура полностью доступна библиотеке:

<svg id="logo">
  <title>Логотип сервиса</title>
  <desc>Анимированный логотип с эффектом прорисовки</desc>

  <path d="..." />
</svg>

<script>
new Vivus('logo', {
  duration: 200,
  type: 'sync'
});
</script>

В этом режиме <title> и <desc> остаются частью DOM и доступны для:

  • скринридеров
  • инспекторов
  • динамического изменения через JavaScript

Внешний SVG-файл

При загрузке через file-параметр Vivus извлекает содержимое SVG и инжектирует его в DOM:

new Vivus('element', {
  file: 'image.svg',
  duration: 150,
  type: 'delayed'
});

Если внешний файл содержит:

<svg>
  <title>Иконка письма</title>
  <desc>Конверт, символизирующий отправку сообщения</desc>
</svg>

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

Поведение при анимации сложных SVG-структур

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

Структурный пример:

<svg>
  <title>Схема процесса</title>
  <desc>Диаграмма этапов обработки данных</desc>

  <g>
    <title>Блок обработки</title>
    <path d="..." />
  </g>
</svg>

В данном случае:

  • внешний <title> описывает весь SVG
  • вложенный <title> относится к группе
  • Vivus анимирует только <path> внутри <g>
  • текстовые узлы остаются статичными

Иерархия метаданных не нарушается, даже если визуальное состояние элементов изменяется по времени.

Совместимость с доступностью и ARIA

SVG-метаданные часто дополняются ARIA-атрибутами:

<svg role="img" aria-labelledby="svgTitle svgDesc">
  <title id="svgTitle">График роста</title>
  <desc id="svgDesc">Линейный график увеличения значений во времени</desc>

  <path d="..." />
</svg>

Vivus не вмешивается в ARIA-структуру, сохраняя:

  • связи aria-labelledby
  • идентификаторы элементов
  • семантическую модель SVG

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

Особенности работы с динамически изменяемыми метаданными

При изменении <title> или <desc> во время выполнения анимации:

  • Vivus не отслеживает изменения текстовых узлов
  • обновления не влияют на уже запущенную анимацию
  • новые значения отображаются только в DOM после модификации

Пример динамического обновления:

document.querySelector('title').textContent = 'Новое описание';

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

Влияние оптимизаторов SVG

Инструменты оптимизации (например, SVGO) могут:

  • удалять <title> и <desc>
  • переносить метаданные
  • упрощать структуру групп

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

{
  "plugins": [
    {
      "name": "removeTitle",
      "active": false
    },
    {
      "name": "removeDesc",
      "active": false
    }
  ]
}

Сохранение этих узлов критично для сохранения доступности SVG-анимаций.

Особенности рендеринга в браузере

Браузер интерпретирует <title> и <desc> следующим образом:

  • не отображает визуально
  • использует как fallback-описание
  • передаёт в accessibility tree

Vivus, изменяя stroke-параметры, не влияет на этот слой представления. Это разделение делает возможным параллельное существование анимации и семантики без конфликтов между ними.

Оглавление