Диагностика и отладка приложений SVG

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

1. Создание SVG приложения
1.1 Создавать и производить отладку SVG необходимо в родной среде, то есть в файле с расширением *.svg

Для примера возьмем очень короткий код и сохраним его в двух форматах Primer.html и Primer.svg


При запуске Primer.html ничего не произойдёт, но и ожидаемый прямоугольник не появится. Ошибку легко найти, когда код короткий, а если это несколько сотен строчек?
При запуске файла в формате Primer.svg парсер SVG выведет на экран сообщение об ошибке:

Ожидается тег закрытия-rect

Сразу становится понятно, что не закрыт тег <rect> …… </rect>

1.2 Нужно ли указывать в шапке файла Namespace?

Современные браузеры последних версий лояльно относятся, если не указано Namespace

Сообщений об ошибке парсер HTML не выдаст.
Но если запустить файл.svg с аналогичным кодом, то будет сообщение об ошибке – отсутствии Namespace
Сообщение об отсутствии файлов стилей

Так указывать или не указывать в шапке SVG Namespace?

На положительное решение указывают факты, что возникают проблемы с использованием svg файлов, у которых не указаны в шапке Namespace при добавлении последних в HTML с помощью тегов <img> и <object>

Вывод – нужно обязательно добавлять в шапку svg файла Namespace
2. Решение проблем с видимостью элементов внутри SVG полотна

2.1 Создание видимой границы svg полотна для визуального контроля нахождения svg элементов
Создается рамка точно по границам видимого полотна svg c помощью простого правила CSS в шапке SVG файла: style=”Border:1px solid red;”

Без красной границы полотна svg у нас бы вызвало удивление, почему ожидаемый круг превратился в многоугольник.
Теперь становится понятно, что круг вышел за границы svg полотна и его края были подрезаны.
Решение напрашивается само собой – уменьшить радиус окружности, как минимум до r=”100″

2.2 Позиционирование с помощью команды transfotm=”translate(X Y)”

Второй пример. Допустим имеем такой код:

Ширина квадрата должна быть width=”200″, но видимая часть намного тоньше, и сколько мы не увеличивали бы ширину, квадрат останется узким, потому-что выходит за пределы видимости.
Для возвращения элементов SVG в зону видимости существует команда transfotm=”translate(X Y)”, которая двигает изображение по осям координат.


3. Решение проблем видимости элементов с помощью графического редактора

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


Ничего нет. Все попытки поиска красной фигуры методом научного тыка, применяя команду перемещения изображения
<g transform=”translate(X Y)”> и подбора координат, скорее всего кроме разочарования ни к чему не приведут. Спасёт в этой ситуации любой векторный редактор.

3.1 Открываем файл в векторном редакторе и уменьшаем масштаб изображения до тех пор пока не найдется красная фигура.
Фигура вне зоны видимости

Серый прямоугольник это зона видимости нашего svg файла. Чтобы переместить красную фигуру в зону видимости нужно, как видно из рисунка, переместить её влево на 370px и поднять вверх на 1170px. Это можно сделать и другим способом,- используя координаты x-min, y-min у viewBox
Например: viewBox=”370 1170 300 300″

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

Добавить комментарий