5

введите сюда описание изображения

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

  • Какие есть наиболее часто встречающиеся ошибки в написании кода SVG?

  • Какие есть практические способы диагностирования ошибок?

  • Как избежать появления ошибок, делающих приложение svg неработоспособным?

. Использовано изображение https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg

1 ответ 1

5

1. Создание SVG приложения

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100"
viewBox="0 0 100 100" >  
 <rect  width="100px" height="100px" fill="skyblue">
</svg>

  • При запуске Primer.html ничего не произойдёт, прямоугольник появится, но если вы будете его использовать дальше в приложении, например клонировать с помощью команды <use>, то будете долго искать ошибку,- почему не появляются копии прямоугольников.

  • При запуске файла в формате Primer.svg парсер SVG выведет на экран сообщение об ошибке:

введите сюда описание изображения

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

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

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

xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"     
  • Сообщений об ошибке парсер HTML не выдаст.
  • Но, если запустить файл.svg с аналогичным кодом, то будет сообщение об ошибке – отсутствии Namespace

введите сюда описание изображения

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

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

Вывод – нужно обязательно добавлять в шапку svg файла Namespace.

Шаблон - заготовка файла SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
     width="370" height="460" viewBox="0 0 370 460" >  

<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="purple" />
</svg>	 

2. Решение проблем с видимостью элементов внутри SVG полотна

2.1 Создание видимой границы svg полотна для визуального контроля нахождения svg элементов.

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"
viewBox="0 0 200 200" style="Border:2px solid red;" >  
 <circle  cx="100" cy="100" r="110" fill="yellowgreen"/>
</svg>

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

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"
viewBox="0 0 200 200" style="Border:1px solid red;" >  
 <rect  x="150" y="10" width="200" height="200" fill="yellowgreen"/>
</svg>

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"
viewBox="0 0 200 200" style="Border:1px solid red;" >  
 <g transform="translate(-130 0)">
 <rect  x="150" y="10" width="150" height="200" fill="yellowgreen"/>
 </g>
</svg>

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" heght="200" viewBox="0 0 300 300" style="border:1px solid red;">
 
<path id="svg_23" d="m448,1395.555556c0,0 62.222222,1.777777 62.222222,1.777777c0,0 78.222222,-72.888889 78.222222,-72.888889c0,0 -3.555555,-92.444444 -3.555555,-92.444444c0,0 -135.111111,0 -135.111111,0z" stroke-dasharray="0" stroke-width="5" stroke="#000000" fill="red"/>
</svg>

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

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

введите сюда описание изображения

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" heght="200" viewBox="370 1170 300 300" style="border:1px solid red;">
 
<path id="svg_23" d="m448,1395.555556c0,0 62.222222,1.777777 62.222222,1.777777c0,0 78.222222,-72.888889 78.222222,-72.888889c0,0 -3.555555,-92.444444 -3.555555,-92.444444c0,0 -135.111111,0 -135.111111,0z"  stroke-width="5" stroke="#000000" fill="red"/>
</svg>

4. Валидатор SVG

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

https://validator.w3.org

1
  • 1
    Спасибо за ответ, очень пригодится!
    – Pavel
    9 мая 2018 в 20:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.