Структура SVG документа

1. Шапка SVG файла

“Основа основ, но какая же ты запутанная и огромная”. Вот что приходит в голову, когда смотришь на шапку в примерах SVG файлов из разных уважаемых источников.
Различия начинаются буквально с первой строки: в одних файлах есть стандартный XML-заголовок, объявление, указывающее версию XML (version) (обычно “1.0”) и кодировку символов (encoding):

и далее заголовок DOCTYPE, определяющий тип документа:

в других примерах XML-заголовка и объявления DOCTYPE нет:

Так как же правильно? Что нужно обязательно прописать, а что можно и пропустить, не переживая за то, что что-то не сработает из-за неполного или неточного заголовка файла SVG?
Ответ даёт:

Сообщество SVG и в частности разработчик Jonathan Watt пришли к выводу, что в некоторых случаях при применении Mozilla Firefox со встроенным просмотрщиком SVG содержание объявления DOCTYPE может быть источником ошибок. Поэтому они рекомендуют не использовать декларацию DOCTYPE в SVG версий 1.0 и 1.1. Вместо этого рекомендовано включать атрибут baseProfile в корневой элемент <svg> со значением “full” см. пример выше

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

Первая строка листинга выше это объявление viewport. Указывается только его ширина и высота. Начало координат viewport всегда находится в левом верхнем углу, поэтому не указывается в объявлении. Положительное направление осей ординат: “Х” – вправо,
“Y” – вниз.
Вторая строка это – viewBox, который может быть расположен в любом месте на холсте SVG, поэтому первые два параметра, отвечающие за начало координат viewBox могут либо совпадать с началом координат viewport (0,0), либо отличаться от нулей, сдвигая тем самым изображение по осям ординат – подробнее здесь.
Изменением соотношения ширин и соответственно высот viewport и viewBox можно увеличивать или уменьшать изображение.
Допустим ширина и высота viewport в два раза больше ширины и высоты соответственно viewBox:

При таком соотношении изображение увеличится ровно в два раза – подробнее здесь.
Равенство этих параметров viewport и viewBox гарантирует отрисовку элементов в масштабе 1:1, без трансформаций.

2. Тело SVG файла
  • <title> ….. </title>
    Изначально SVG был задуман, как самостоятельный векторный формат в виде изолированного файла. Поэтому он имеет парный тег заголовка <title> по аналогии с файлом *.html для краткого описания смыслового содержания файла.
  • тег <desc> ….. </desc> служит для более развернутого описания содержания файла. Оба эти тега необязательны, но их наличие полезно, так как поисковики очень хорошо индексируют содержащийся в них текст, сначала, как заголовок к картинке, а затем как её описание. Разработчик файла SVG может использовать эти теги многократно внутри одного файла, облегчая понимание отдельных частей кода.
  • Следующая важная, но не обязательная часть – это секция, заключенная в парные теги <defs> …. </defs>
    <defs> (от англ. definitions — определения). По сути это библиотека, где вы можете создавать и хранить любые элементы SVG: pattern, marker, path, gradient, а так же любую из основных фигур SVG. Для использования этого элемента в этом же файле или в другом файле, элементу необходимо присвоить уникальное имя id = “…”.

    Все объекты, находящиеся внутри тегов <defs> будут невидимыми, до тех пор пока вы их не вызовите командой <use xlink:href=”#id_name”> в теле SVG документа.
  • далее идёт непосредственно код основных фигур SVG, позволяющий отрисовывать сами векторные изображения.
    Очень часто используется парный тег: <g> ….. </g> для объединения нескольких фигур в группу для последующих действий над ней, как над одним целым, например для: перемещения, поворота, масштабирования и т.д. Группе так же может быть присвоен уникальный номер – id = “…” для повторного использования. В свою очередь несколько групп могут быть объединены в одну.

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

    3. Шаблон SVG файла. The SVG template file.

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

    следующая: Эти странные тэги SVG ⇛

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