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

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

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

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

Can I use: сведения о поддержке SVG в браузерах //caniuse.com
SVG (Русский) //runebook.dev/ru/docs/svg

SVG – Scalable Vector Graphics

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

Структура контейнера

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

:

С

Структура содержания файла svg-картинки предусматривает xml-заголовок, заголовок документа и svg-тег:

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

//

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

Элементы SVG

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

Элемент Линия <line>

///

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

///

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

Элементы окружность <circle> и эллипс <ellipse> позволяют изобразить обводку и/или заполнение соответствующих фигур построенных вокруг центра с координатами cx и cy и радиусом r для окружности, а для эллипса с горизонтальным и вертикальным радиусами rx и ry:

Элементы ломаная <polyline> и полигон <polygon>

Элементы ломаная <polyline> и полигон <polygon> позволяют построить обводку и/или заполнение по произвольному набору точек, заданных в атрибуте points парами координат. Если в наборе последняя точка не совпадает с первой, то контур ломаной останется разорванным, а для полигона автоматически будет достроено замыкающее ребро, при этом заполнение для обоих видов выполняется идентично:

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

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

Элемент <path> является наиболее многообразным и комплексным, что в принципе позволяет ему заменить все остальные виды элементов. Траектория может состоять из произвольной последовательности прямых и сплайнов Безье заданной последовательностью команд в значении атрибута d . Траектория может быть использована для обводки, заполнения или обоих вместе:

Атрибут d

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

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

Серия начинающаяся командой M или m и завершающаяся z образует замкнутую область, которая может быть залита свойством fill. Атрибут d может содержать несколько серий, образующих несколько областей:

Способ заполнения областей при наложении друг на друга зависит от свойства fill-rule .

Команды установки пера 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 эквивалентны.

/

Элемент Текст <text>

В SVG предусмотрен вывод произвольного текста элементом <text>:

text-anchor определяет выравнивание
start | middle | end | inherit

rotate - вращает каждую букву

В отличие от html-элемента <div>, для svg-элемента <text> не предусмотрена возможность переноса строк, весь заданный текст выводится одной строкой без переноса независимо от длины текста. Для вывода нескольких строк применяется элемент <tspan>.

SVG элемент <text> или <tspan> может иметь определенную длину, установленную атрибутом textLengt, при этом атрибут lengthAdjust устанавливает способ, которым текст помещается в эту длину (растягивается или сжимается).

//

Элемент !!! <image>

//

Элемент <g>

Элемент g используется для группировки других svg-элементов. Любые преобразования применяемые к g-элементу наследуются его дочерними элементами. Также g-элемент используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью <use>.

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

Изображения 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-элементов - действительные числа: положительные, отрицательные, дробные с десятичной точкой в качестве разделителя.

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

Суть функции viewBox - задать область клиентского просмотра в svg-контейнере, которую надо полностью отобразить в области, которую браузер выделил 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
Пример использования и эффектов viewBox

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

Результат отображения на иллюстрации зуммирован на 300% для выявления характерных эффектов:

  • 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:

//

Стиль

Стили в SVG аналогично CSS позволяют назначить свойства селекторам элементов, классов и комбинаций, которые можно применять в svg-элементах также, как и в html-элементаж:

///

Атрибуты

Атрибуты применяются при задании свойств отображения с помощью стилей в теге <style>...</style> и в элементах с помощью атрибута <... style='...' .../>

Обводка

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

stroke-linecap="butt" | "round" | "square"

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

stroke-linejoin="miter" | "round" | "bevel"

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

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

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

stroke-linejoin - атрибут презентации, определяет форму на углах путей в точках соединения. Применяется с элементами: <altGlyph> <path> <polygon> <polyline> <rect> <text> <textPath> <tref> <tspan>
Возможные значения: arcs | bevel | miter | miter-clip | round по умолчанию miter

Правило заполнения fill-rule

Атрибут fill-rule представления, формулирует алгоритм, для определения заполнения внутренней части фигур path, polygone и др. Имеет значение, если область фигуры имеет самоналожения  или состоит из нескольких наложенных областей. Анимируемый. Предполагает значения:

  • nonzero по умолчанию, имеет замысловатое объяснение в документации, но по сути обеспечивает заполнение внутреннего пространства фигуры.
  • evenodd по сути обеспечивает заполнение фигуры в точках, где число наложенных слоев нечетно.

Правило заполнения clip-rule

Атрибут clip-rule применяется только к графическим элементам, содержащимся в элементе <clipPath> и в основном работает как атрибут fill-rule.

Атрибут transform

Для преобразования SVG элемента может быть использован атрибут transform, который может осуществить комплекс геометрических трансформаций над отдельным элементом или группой.
Источник: //developer.mozilla.org

Преобразование matrix(<a> <b> <c> <d> <e> <f>)

Преобразование с использованием матрицы из шести элементов. Преобразование matrix(a,b,c,d,e,f) равнозначно применению матрицы

Перенос translate translate(<x> [<y>])

Перенос по осям x и y. Равнозначно matrix(1 0 0 1 x y). Если значение y опущено, оно принимается равным нулю.
scale(<x> [<y>])

Масштаб scale(<x> [<y>])

Масштабирование по осям x и y. Равнозначно matrix(x 0 0 y 0 0). Если значение y опущено, оно принимается равным x.

Поворот rotate(<a> [<x> <y>])

Поворот на a градусов вокруг указанной точки. Если необязательные параметры x и y опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице
(
cosa -sina 0
sina cosa 0
0 0 1
)

Если необязательные параметры x и y присутствуют, поворот будет осуществляться вокруг точки (x, y). Операция равнозначна следующему списку преобразований: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).

Наклоны skewX(<a>), skewY(<a>)

Наклон относительно оси x на a градусов. Операция соответствует матрице
(
1 tga 0
0 1 0
0 0 1
)
skewY(<a>)

Фильтры

Изображения созданные svg-элементами полностью или частично могут быть обработаны графическими фильтрами. Число различных эффектов для фильтров по мере развития SVG увеличивается и на текущий момент существует 17 эффектов. Конечный результат применения фильтров может отличаться в реализациях разных браузеров.

Пример использования фильтра размытия Гаусса:

Эффекты

//

<feGaussianBlur in="SourceGraphic" stdDeviation="5" edgeMode="wrap" />

<feImage xlink:href="/files/6457/mdn_logo_only_color.png"/>

<feMerge><feMergeNode in="blur2" />

<feMorphology operator="erode" radius="1"/>

<feOffset in="SourceGraphic" dx="60" dy="60" />

<feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>

<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" flood-color="pink" flood-opacity="0.5"/>

<feFlood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/>

Обертки для SVG

 Описание векторного изображения в <svg>...</svg> может использоваться автономно, но чаще в качестве SVG встроенного в HTML или в XML обертке.

Внутренний SVG в HTML

 В составе html-документа графика SVG размещается в теге <body>:

/

HTML внешний SVG

Если вы планируете использовать svg-файл, как анимированную картинку лого без интерактивности (наведение, клик курсора и т.д), то можно использовать для добавления тег <img>:

 //

Файл заданный ссылкой в атрибутах src или data должен быть файлом svg-картинки в xml-обертке, описанной ниже.

Картинка SVG

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

Минимальной корректно отображаемой оберткой svg-тега является:

Структура содержания файла svg-картинки предусматривает xml-заголовок, заголовок документа и svg-тег:

 xml:space="preserve" version="1.1" width="200px" height="200px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 128.29 128.29" xmlns:xlink="http://www.w3.org/1999/xlink"

...

SVGZ

Код SVG характеризуется большим объемом, который хорошо сжимается в силу текстовой природы XML-кода, имеющего однообразную повторяющуюся структуру. Для сжатого SVG предусмотрена обёртка SVGZ, которая является тем идентична SVG, но упакована утилитой gzip и снабжена расширением .svgz. Обертка SVGZ поддерживается не всеми браузерами, а точнее немногими, а еще точней только Google Chrome и Opera, и в Firefox со специальной настройкой.

 svg Content-Type: image/svg+xml

 svgz Content-Type: image/svg+xml
Content-Encoding: gzip

Скрипты и программные средства

Элементу SVG может быть установлен атрибут id, с помощью которого в HTML документе он может быть получен внутренним JavaScript или внешним вызовом методов document.getElementById() или document.querySelector().

 

//Маркер.setAttribute("stroke-width", "20");
//stroke-width:1
//б.setAttribute("visibility"); б.getAttribute("cx")
//document.querySelector('tspan').setAttribute('y','19%')

Источники

  • 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
  •  Эффекты фильтрации SVG
    • Часть 1. SVG фильтры 101 //habr.com
    • Часть 2. Контурный текст при помощи feMorphology //habr.com
    • Часть 3. Эффект постеризации изображения при помощи feComponentTransfer //habr.com
    • Часть 4. Двухцветные изображения при помощи feComponentTransfer //habr.com
    • Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap //habr.com
    • Часть 6. Создание текстуры с помощью feTurbulence //habr.com
    • Часть 7. Продвижение вперед //habr.com
  •  "Живые" картинки со Snap.SVG //infostart.ru
  • Разбираемся с WebKit в 1С, на примере интеграции TinyMCE в управляемую форму в УТ 11.4 //habr.com

Leave a Reply