Масштабируемая векторная графика в разметке SVG

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

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

  • SVG
    • Файла SVG картинки
    • SVG в составе HTML
  • Структура
  • Элементы SVG
    • Контейнер и система координат
      • Пример с разбором
    • Дополнительная система координат
    • Линия
    • Прямоугольник
    • Окружность и эллипс
    • Полилиния и полигон
    • Траектория
    • Текст
  • Стили
  • Анимация
  • JavaScript
  • SVGZ
  • Источники

Can I use: сведения о поддержке SVG в браузерах //caniuse.com

SVG – Scalable Vector Graphics

Стандарт разметки SVG предоставляет расширенные возможности создания графических элементов в составе HTML документа или в автономном файле SVG.

SVG в Картинке

Графика SVG может быть задана как автономная картинка, сохраняемая в файле. По стандарту содержание файла svg-картинки предусматривает xml-заголовок, заголовок документа и svg-тег:

Для корректного отображения в форме 1С минимальным достаточным содержанием будет:

SVG в HTML

Графика SVG может быть задана как часть html-документа в теге <body>…

Структура

Структура тега <svg> в svg-файле и в составе html-документа идентична и предусматривает !!!:

Элементы SVG

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

Контейнер и система координат

Изображения SVG — использует планарную систему с начальной точкой координат, находящейся по умолчанию в левом верхнем углу svg-контейнера размещенного в теле страницы браузера. Отступ svg-контейнера от начала страницы браузера применяется ко всем svg-элементам. Атрибут position:absolute применим к svg-контейнеру, но неприменим к svg-элементам. Пример гарантированного совмещения начала координат svg-объекта с началом координат страницы:

Пример: viewBox уменьшил и сдвинул отображение координатной системы SVG на странице браузера

Браузер не знает о геометрии элементов в svg-контейнере и судит о его размере только по свойства width и height, которые задают его формальный размер для браузера. Исходя из этого размера браузер компонует другие элементы страницы и отображает полосы прокрутки. Если полосы прокрутки браузера не нужны, свойства размера можно не указывать совсем, если же полосы предстоит использовать, то размеры контейнера должны точно соответствовать размерам svg-изображения, образованного его элементами.

Размер и положение svg-элементов в svg-контейнере ничем не ограничены, поэтому если в svg-контейнере не использован элемент обрезки <clipPath>, то svg-изображение может использовать все пространство страницы браузера доступное body и не ограничивается границами svg-контейнера, если только для него не задан стиль overflow:hidden.

Координаты и параметры svg-элементов — действительные числа: положительные, отрицательные, дробные с десятичной точкой в качестве разделителя.

Координатная система страницы браузера может быть сдвинута и масштабирована с помощью специального свойства ViewBox со значением вида ‘<min-x> <min-y> <width> <height>’. При этом сама координатная система svg-контейнера не изменится, но изменится ее отображение на странице браузера, что важно учитывать при разработке интерактивного взаимодействия с svg-контейнером (см. на иллюстрации: viewBox уменьшил и сдвинул отображение координатной системы svg на странице браузера).

Суть функции viewBox — задать область клиентского просмотра в svg-контейнере, которую надо полностью отобразить в области, которую браузер выделил контейнеру на странице. Для этого случая атрибуты width и height svg-контейнера должны быть обязательно заданы, иначе значение атрибута viewBox будет проигнорировано. Атрибут viewBox — это строка из двух пар числовых значений:

  • <min-x> и <min-y> — пара чисел задает отступ начала отсчета области от начала отсчета svg-изображения
  • <width> и <height> — пара чисел задает размер фрагмента svg-изображения

    • если для svg-контейнера не задан атрибут preserveAspectRatio, то область клиентского просмотра будет вписана с сохранением пропорций сторон точно по центру
    • если для холста задан атрибут preserveAspectRatio=»none», то фрагмент будет вписан по размерам без сохранения пропорций
    • у атрибута preserveAspectRatio возможны и другие значения: {none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax} //developer.mozilla.org
Пример с разбором

Отображение окружности радиуса R 100px вокруг нулевой точки в svg-контейнере 50x50px с viewBox 160x160px:

На иллюстрации с увеличением 300% наглядно видны характерные эффекты отображения на html-странице svg-картинки с заданным viewBox:

  • BODY: атрибуты margin и padding не были заданы, поэтому имеют значения по умолчанию, что проявилось в отступе от границы слева и сверху
  • SVG: 50 px — это размер внутреннего пространства svg-контейнера в координатах BODY
  • CIRCLE
    • не был обрезан границами svg ни справа, ни снизу
    • был обрезан слева и сверху границами body
    • перекрывает рамку svg
    • viewBox определил радиус R = 100px • (50 / 160) = 31.25px
    • viewBox определил контур B = 5px • (50 / 160) = 1.56px

Дополнительная система координат

В основном svg-контейнере разные группы элементов могут использовать разные системы координат, для этого каждая группа должна быть помещена в отдельный контейнер <svg> со своим атрибутом viewBox:

 

Элемент Линия

///

Элемент Прямоугольник

///

Элементы окружность и эллипс

///

Элементы ломаная и полигон

///

///

Атрибут points

Значение атрибута points содержит серию числовых пар значений координат, отделенных запятыми и пробелами, которые синтаксисом строго не регламентированы. Синтаксису достаточно, чтобы значения были отделены любым способом, и запятые используются только для улучшения читаемости пар. Допустимо отделять значения в серии просто знаком без пробела. Все варианты эквивалентны:

 

Элемент Траектория

Элемент <path> очень

Команды установки пера M, m

Начало траектории устанавливается командой М или m в точку заданную координатной парой mX и mY. Начальная точка траектории по умолчанию уже находится в координате (0,0) и это делает равнозначной первую команду M или m. Команды установки начала траектории могут использоваться еще несколько раз для создание нескольких отдельных траекторий, где они уже не будут иметь эквивалентное значение. Пример диагональной пунктирного указателя:

 

Команды линий H, h, V, v, L, l

Команды H и h продолжают траекторию по горизонтали в указанную горизонтальную координату X.
Команды V и v продолжают траекторию по вертикали в указанную вертикальную координату Y.
Команды L и l продолжают траекторию  в точку указанную координатной парой X,Y.
Пример:

Команды кривых Безье Q, q, S, s, C, c, T, t

Кривые Безье (также называют «сплайны Безье») предназначены для плавного сопряжения начального и конечного вектора с помощью плавной кривой. Wikipedia содержит интересные материалы о сути, истории создания и математической основе этих кривых. В SVG представлены четыре вида команд для типичных случаев.

В случае, если начальный вектор BC и конечный вектор CE имеют общую точку C, то они описываются квадратичной кривой Безье. Команды Q и q продолжают траекторию по квадратичной кривой Безье, заданной общей точкой cX,cY и конечной точкой eX,eY. Пример снабжен иллюстрацией, на которой наглядно изображены десять последовательных шагов трансформации начального вектора в конечный, которые формируют квадратичную кривую Безье:

 

В случае, если векторы полностью независимы (формируются из четырех точек), то кривая описывается кубической кривой Безье. Команды C и c продолжают траекторию по кубической кривой Безье, заданной двумя точками векторов cX₁,cY₁ и cX₂,cY₂ и конечной точкой eX,eY. Пример снабжен иллюстрацией, на которой дополнительно изображены условные линии векторов кубической кривой:

 

При формировании траектории из последовательности кривых Безье может потребоваться обеспечить симметричность в точке их соединения. Команды T и t продолжают траекторию после любой другой команды кривой Безье по квадратичной кривой к конечной точке eX,eY, при этом дополнительная точка C₂ получается симметричной проекцией из предыдущего фрагмента кривой. Пример снабжен иллюстрацией, на которой для квадратичной кривой BC₂E в точке B обеспечивается симметричность предыдущему фрагменту С₁B, для этого точка С₁ проецируется через точку B в точку C₂. Поскольку точка C₂ вычисляется, командам T и t достаточно задать только конечную координатную точку E:

 Сходно с предыдущей командой бывает необходимо получить сглаженную , если векторы независимы Команды S и s (cX2,cY2 eX,eY) кубическую кривую Безье по трем точкам сглаженную с предыдущей
Команды (S может выступать модификатором сглаженности между отдельными кривыми !!!)

Команды дуг A, a

A (rX,rY rotation, arc, sweep, eX,eY) проводит эллиптическую дугу

rX, rY радиусы по горизонтали и вертикали

если заданные радиусы недостаточны для проведения дуги, то они пропорционально увеличиваются до минимально необходимой величины

    • rotation угол поворота радиусов в градусах
    • arc {0,1} выбирает при избыточных величинах радиусов проведение дуги <180 или дуги >180
    • sweep {0,1} выбирает направление проведения дуги против или по часовой стрелке
Команда замыкания z

Команда замыкания возвращает траекторию к исходной точке, установленной командой M или m. Замыкание не имеет параметров, поэтому команды Z и z эквивалентны.

Атрибут d

Значение атрибута d содержит серию команд и числовых значений, отделенных запятыми и пробелами, которые синтаксисом строго не регламентированы. Поскольку все команды состоят из единственного символа, их можно не отделять никаким символом. Запятые используются для улучшения читаемости групп координатных пар и могут заменяться пробелами или знаком. Допустимо отделять значения в серии только знаком без пробела. Ниже в примере все варианты эквивалентны:

Текст

В SVG предусмотрен вывод произвольного текста элементом <text>, однако в отличие от тега <div>, для него не предусмотрен предел ширины области вывода, поэтому весь текст выводится одной строкой без переноса независимо от размера текста.

///

Стиль

Определение стиля позволяет в дальнейшем назначить любому элементу весь набор значений атрибутов стиля указав только его имя.

///

Атрибуты

Обводка

Способ представления концов линий и открытых путей определяет атрибут:

stroke-linecap=»butt» | «round» | «square»

Способ соединения сегментов пути определяет атрибут:

stroke-linejoin=»miter» | «round» | «bevel»

Автоматическое изменение способа соединения сегментов bevel на miter при острых углах определяет атрибут:

stroke-miterlimit=»<предел отношения скоса к ширине обводки>»

Пример трех путей открытых и одного закрытого пути:

 

 

SVGZ

Код SVG занимает довольно много места, но хорошо сжимается, поскольку это текстовый XML-документ, имеющий регулярную структуру, поэтому была создана «обёртка» SVGZ. По сути это — файл полученный с помощью gzip, снабженный расширением .svgz.

 

Источники

  • Wikipedia:SVG //ru.wikipedia.org
  • Масштабируемая векторная графика (Scalable Vector Graphics — SVG) //developer.mozilla.org
  • Can I use: сведения о тестах совместимости компонентов SVG //caniuse.com
  • Простой и содержательный сайт от Alexandr_T //svg-art.ru
    • Online генераторы примеров //svg-art.ru
  • Размеры в SVG (интерактивное демо: Вьюпорт, Ширина и высота, viewBox, preserveAspectRatio, Единицы измерения, Системы координат) //css.yoksel.ru
  • Peter Collingridge’s personal site (SVG basics, Interactive SVGs, 3D Graphics with Processing.js…) //www.petercollingridge.co.uk
  •  «Живые» картинки со Snap.SVG //infostart.ru
  • Разбираемся с WebKit в 1С, на примере интеграции TinyMCE в управляемую форму в УТ 11.4 //habr.com

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