ОСОБЕННОСТИ ИСПОЛЬЗОВАНИЯ ВЕКТОРНОЙ SVG ГРАФИКИ

Введение в векторную графику

Для начала, познакомимся с понятиями векторной графики. Выделим её достоинства и недостатки. Итак, векторные изображения состоят из множества опорных точек и соединяющих их кривых. Векторное изображение описывается математическими формулами и, соответственно, не требует наличия информации о каждом пикселе. Сколько ни увеличивай масштаб векторного изображения, вы никогда не увидите пикселей [1]. Этот факт играет важную роль при размещении векторных изображений, например, на странице веб сайта, но об этом чуть позже. Любой вычислительный процесс занимает определенное количество ресурсов. И если изображение содержит сложную конструкцию, то требования к вычислительным мощностям возрастет соответственно. Однако, стоит заметить, что такие изображения содержат в себе малую долю информации, поэтому занимают меньше памяти, чем их аналог – растровое изображение. Выделим следующие преимущества: малый объем занимаемой памяти, масштабирование до любого разрешения без потери качества. К недостаткам можно отнести: большие вычислительные мощности при сложной композиции изображения.

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

Особенности взаимодействия

Формат векторной графики SVG имеет поддержку языка разметки XML, поэтому с ним можно с легкостью взаимодействовать с помощью языка Java Script [2]. Использование такого подхода позволяет управлять анимацией, позицией, состоянием SVG элемента. Лучше всего располагать код SVG – изображения прямо внутри тегов «body» чтобы иметь к ним доступ через объектную модель документа. Однако, стоит заметить, что структура SVG файла сложная, ввиду множества тегов, находящихся внутри её, отвечающие за представление изображения. Поэтому, необходимо заранее знать или обозначить по-своему идентификаторы изменяемых областей. Также, не следует забывать о поддержке функций взаимодействия браузерами. В связи с этим, был произведен экспериментальный анализ поддержки функций обращения к элементам, результаты представлены в таблице 1.

Таблица 1.

Совместимость функций с браузерами

Стоит заметить, что результаты, представленные в таблице 1 отражают совместимость со всеми версиями перечисленных браузеров. Таким образом, если необходимо редактировать один уникальный блок SVG изображения, то достаточно использовать функцию getElementById для обращения к соответствующему элементу. Однако, как же быть, если нужно изменить несколько одинаковых элементов. Для достижения этой цели можно использовать функцию querySelectorAll. Если задать, повторяющемся элементам, например, свойство «name» с одинаковым значением, то при использовании функции querySelectorAll с параметром «’[name=”value”]’», то результат выполнения функции вернет список объектов с значением «value» [3]. Результат работы такого подхода представлен на рисунке 1.

Рисунок 1. изменение заливок областей изображения

Такой подход можно использовать в любом направлении. От изменения цвета заливки до изменения параметров самого изображения и его анимирования.

Список литературы:

1. Растровая и векторная графика. URL: https://htmlacademy.ru/blog/boost/graphics/rastr-vector (дата обращения: 27.05.20)
2. Навигация по DOM - элементам. URL: https://learn.javascript.ru/traversing-dom (дата обращения: 27.05.20)
3. S. Edelkamp. Automated System Verification // «Temporal logic» 03.02.2012. URL: https://www.sciencedirect.com/topics/computer-science/kripke-structure (дата обращения: 27.05.20)