Адаптация под разные языки

Интернационализация SVG-анимаций в контексте Vivus начинается с понимания того, что сама библиотека работает исключительно с путями (path) и не зависит напрямую от текстового содержимого. Это создаёт важное разделение: анимация линий и контуров остаётся стабильной, тогда как языковая локализация затрагивает в первую очередь текстовые элементы, структуру SVG и его компоновку.

SVG-документ в мультиязычных интерфейсах обычно состоит из двух независимых слоёв:

  • векторная графика (контуры, пути, формы), управляемая Vivus
  • текстовые элементы (<text>, <tspan>, <foreignObject>)

Такое разделение критично, поскольку Vivus модифицирует только атрибуты путей (stroke-dasharray, stroke-dashoffset), не затрагивая DOM текстовых узлов. Это означает, что изменение языка не влияет на механику анимации, но может радикально менять визуальную композицию.

Локализация текста внутри SVG

SVG поддерживает несколько способов размещения текста:

<text> и <tspan>

Наиболее предсказуемый вариант для интернационализации. Текст остаётся векторным, легко стилизуется через CSS и поддерживает базовые трансформации.

Ключевые аспекты локализации:

  • различная длина строк между языками
  • переносы строк через <tspan>
  • необходимость ручного управления позиционированием
  • зависимость от text-anchor

При переключении языка часто требуется пересчёт координат:

const translations = {
  en: "Loading data",
  ru: "Загрузка данных",
  de: "Daten werden geladen"
};

textNode.textContent = translations[locale];

Даже такая простая замена может нарушить композицию, если текст встроен в сложный SVG-контур.

<foreignObject>

Позволяет использовать HTML внутри SVG. Это радикально упрощает локализацию, поскольку текст становится обычным DOM-элементом.

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

  • полноценная работа CSS
  • автоматический перенос строк
  • поддержка web-шрифтов
  • лучшая адаптация длинных строк

Однако Vivus не управляет содержимым foreignObject, поэтому синхронизация с анимацией должна выполняться отдельно через JavaScript.

Языки с направлением справа налево (RTL)

Поддержка арабского и ивритского языков требует учёта направления текста. В SVG это регулируется через атрибут:

<text direction="rtl" unicode-bidi="bidi-override">

или через CSS:

direction: rtl;
unicode-bidi: isolate;

Проблемы, возникающие при интеграции с анимацией:

  • смещение координат при изменении направления текста
  • несоответствие визуального начала анимации и текстового потока
  • необходимость зеркалирования отдельных групп (<g transform="scale(-1,1)">)

Vivus продолжает анимацию по исходным path, поэтому визуальное восприятие может конфликтовать с направлением чтения.

Шрифтовая поддержка и многоязычные наборы символов

При использовании SVG-текста ключевую роль играет поддержка шрифтов:

  • латиница и кириллица обычно не вызывают проблем
  • CJK (китайский, японский, корейский) требуют шрифтов с расширенным набором глифов
  • арабские символы требуют поддержки контекстного формообразования

Важно учитывать:

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

Пример настройки:

text {
  font-family: "Noto Sans", "Arial", sans-serif;
}

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

Влияние длины текста на композицию SVG

Языковая локализация напрямую влияет на геометрию интерфейса:

  • немецкий текст часто длиннее английского на 30–40%
  • китайский и японский обычно короче, но плотнее визуально
  • финский и венгерский могут значительно расширять строки

Если текст встроен в фиксированную SVG-композицию, возникают проблемы:

  • пересечение текста с анимируемыми путями
  • выход за границы viewport
  • наложение элементов

Решения:

  • использование viewBox с адаптивным масштабированием
  • динамическое изменение font-size
  • перестройка layout при смене языка

Синхронизация Vivus с локализацией

Vivus инициализирует анимацию на основе структуры DOM в момент создания экземпляра:

new Vivus('svg-id', {
  type: 'delayed',
  duration: 200
});

При смене языка возможны два подхода:

Пересоздание SVG

Наиболее надёжный вариант:

  • уничтожение текущего SVG
  • загрузка новой версии с локализованным текстом
  • повторная инициализация Vivus

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

  • полная консистентность
  • отсутствие артефактов

Недостатки:

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

Динамическая подмена текста

Если SVG остаётся неизменным:

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

Риск:

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

Атрибуты доступности и языковая семантика

SVG поддерживает базовую семантику через атрибуты:

<svg role="img" aria-label="График загрузки">
  <title>Loading chart</title>
  <desc>Animated progress indicator</desc>
</svg>

Для мультиязычных интерфейсов важно синхронизировать:

  • aria-label
  • <title>
  • <desc>
  • атрибут lang

Пример:

<svg lang="ru">

или динамически:

svg.setAttribute('lang', locale);

Несогласованность этих значений приводит к проблемам:

  • некорректное озвучивание скринридерами
  • смешение языков в accessibility-дереве

Управление локализациями через JavaScript

Типовая архитектура мультиязычного SVG-интерфейса включает слой конфигурации:

const locales = {
  en: {
    title: "Download",
    label: "Download button"
  },
  ru: {
    title: "Скачать",
    label: "Кнопка загрузки"
  }
};

Функция обновления:

function setLocale(locale) {
  document.querySelector('#title').textContent = locales[locale].title;
  document.querySelector('svg').setAttribute('lang', locale);
}

При этом Vivus остаётся независимым компонентом, не требующим пересоздания, если меняется только текст.

SVG как контейнер мультиязычных сцен

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

  • разные длины стрелок и направляющих
  • изменение плотности элементов
  • перераспределение акцентов в графике

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

  • scene-en.svg
  • scene-ru.svg
  • scene-ar.svg

Инициализация Vivus происходит отдельно для каждого ресурса, что обеспечивает максимальную предсказуемость поведения анимации.

Проблемы совместимости текста и path-анимации

Основная особенность Vivus заключается в том, что он не осознаёт семантику содержимого. Он работает исключительно с геометрией.

Это приводит к ряду архитектурных ограничений:

  • текст не участвует в расчёте анимации
  • изменение языка не влияет на timeline
  • любые изменения DOM после инициализации не учитываются

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

Практики устойчивой локализации SVG-анимаций

Используются следующие подходы:

  • отделение текста от анимируемых path
  • минимизация зависимости текста от координат
  • использование viewBox вместо фиксированных размеров
  • подготовка RTL-зеркальных версий
  • унификация шрифтов через web-font систему
  • хранение локализаций отдельно от SVG-структуры

Такая архитектура позволяет сохранять стабильность Vivus-анимации при любом количестве языковых вариаций, не нарушая визуальную целостность сцены.

Оглавление