ПРИМЕНЕНИЕ BERTOPHOИ ГРАФИКИ В ВЕБ-РАЗРАБОТКЕ

Для цитирования: Кортенко Л.В., Першин А.Д., Фарапонов В.О. Применение векторной графики в веб-разработке // Наукосфера. 2021. № 4-1. С. 149-152.

УДК 004.921

VECTOR GRAPHICS IN WEB DEVELOPMENT

KOPTEHKO ЛЮДМИЛА ВАСИЛЬЕВНА, кандидат экономических наук, доцент, Уральский государственный Экономический Унмверситет.

ПЕРШИН АНДРЕЙ ДМИТРИЕВИЧ, Уральский государственный Экономический Университет.

ФАРАПОНОВ ВЛАДИСЛАВ ОЛЕFОВИЧ, Уральский государственный Экономический Университет.

KORTENKO LYIDMILA VASILIEVNA, candidate ofEconomic Sciences, associate professor, Ural State University ofEconomics.

PERSHIN ANDREY DMITRIEVICH, Ural State University ofEconomics.

FARAPONOV VLADISLAV OLEGOVICH, Ural State University ofEconomics.

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

This article discusses the possibility of using scalable vector graphics in web development. The rele- vance of using this technology is explained. The key features of vector graphics in comparison with other formats are presented. Examples of using vector graphics are given.

Ключевые слова.’ векторная графика, веб-разработка, веб-дизайн, сайты программирование.

Key words. SVG, web development, web design, sites, programming.

В настоящее время в связи с беспрерывным развитием технологий растут и требования к веб-дизайну и разработке сайтов в целом. Теперь, когда на рынке в широком спектре представлены устройства дисплеями с разрешением 4K, владельцы информационных ресурсов сталкиваются с необходимостью оптимизации графической части контента. И в настоящее время некогда популярная растровая графика уже не удовлетворяет условиям высокого разрешения, поэтому ей на смену ей приходит векторный аналог в формате SVG.

Термин SVG (Scalable Vector Graphics) в русском языке переводится как «масштабируемая векторная графика». Это формат появился в 1999 году, и является языком разметки для объектов векторной графики. [1] В последние несколько лет объекты, создава- емые с помощью векторной графики, все чаще используются при создании сайтов благодаря своей простоте, удобству в применении и, что самое главное, возможности улучшить визуальную составляющую любого pecypca.

Далее стр.150:

Определим достоинства, создаваемые применением векторной графики в веб-дизайне и разработке. Первым преимуществом масштабируемой векторной графики SVG является улучшение визуальной части контента веб-страницы благодаря масштабируемости. Векторная графика представляет собой совокупность математически описанных объектов. В связи с этим качество SVG не зависит от разрешения, что позволяет изображениям выглядеть идеально четкими на любом устройстве с любым размером экрана (рисунок 1).

Рис. 1 — Изменение качества изображений при приближении [2]

Вторым достоинством применения векторной графики является повышение производительности вычислительных ресурсов. Использование SVG позволяет минимизировать количество HTTP-запросов встраивания изображения непосредственно в веб-страницу при помощи одноименного тега. Третьим плюсом использования векторной графики является меньший размер файлов по сравнению с другими форматами (рисунок 2). Данные векторного изображения содержат в себе информацию о слоях, эффектах, масках, цветах и градиентах в общем, а не о каждом отдельном пикселе. [4] Благодаря перечисленным особенностям страницы загружаются быстрее, что позволяет улучшить пользовательский опыт и получить более высокий рейтинг в поисковых системах.

Рис. 2 — Сравнение размеров изображений разных форматов

Четвертым положительным моментом при использовании SVG становится повышение функциональности, обусловленное многочисленными возможностями редактирования и анимации. Как и в обычном HTML-документе, в документе SVG можно использовать CSS для оформления его элементов. Стили могут объявляться внутри строки HTML с помощью атрибута style. В качестве альтернативы можно включить в код встроенную или внешнюю таблицу стилей, указывая элементы с помощью селекторов, — точно так же, как это делается в HTML. [5] Простейшее редактирование посредством CSS представлено на рисунке 3. Что касается анимации SVG, это можно сделать с помощью SMIL, Web Animations API, WebGL или CSS-анимации.

Далее стр.151:

Рис. 3 — Редактирование SVG с помощью CSS

Теперь после обобщения ключевых особенностей масштабируемой векторной графики представим примеры ее использования. Первое, SVG позволяет размещать на сайте иллюстрации посредством объединения абстрактных форм и узнаваемых объектов любых цветов и размеров (рисунок 4). При умелом использовании это позволяет создавать стильный дизайн и решать множество художественно-графических задач. [6] С помощью иллюстраций можно создать уникальное оформление и погрузить пользователя в рисованный мир графических фигур. Подобное применение идеально подходит для главной страницы и верхней части сайта.

Рис. 4 — Пример иллюстрации, созданной с помощью SVG

Второе, SVG отлично подходит для создания иконок и текста, которые являются визуальным представлением содержимого сайта, поэтому крайне важно, чтобы они всегда были высокого качества вне зависимости от разрешения экрана [6]. Помимо этого, масшта- бируемую векторную графику можно использовать для объединения вышеперечисленных объектов и создания логотипа сайта, продукта или компании (рисунок 5). Стоит заметить, что вне рамок сайтостроения логотигіы также создаются в векторном формате, чтобы иметь возможность помещать их на полиграфическую продукцию, упаковки товаров и рекламные баннеры.

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

Рис. 5 — Пример логотипа, созданного с помощью SVG

Для примера на рисунке 6 показана интерактивная карта Российской Федерации, разделенная на регионы.

Рис. 6 — SVG карта Российской Федерации

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

СПИСОК ЛИТЕРАТУРЫ

1. Кедлек Т., Адаптивный дизайн. Делаем сайты для любых устройств / Кедлек Т., - CП6.: Питер, 2013. — 289 с.

2. Немцова Т. И., Назарова Ю. В. Компьютерная графика и wеЬ-дизайн. Практикум: учебное пособие / под ред. Л. Г. Гагариной. — М.: ИД «ФОРУМ»: ИНФРА-М, 2010. — 288 с.

3. Григорьева И. В., Компьютерная графика. Учебное пособие / И. В. Fригорьева. — М.: Прометей, 2012. — 297 с.

4. Вейл Э., HTMLS. Разработка приложений для мобильных устройств / Э. Вейл. — CП6.: Питер, 2015. — 171 с.

5. Зиновьева Е. А., Компьютерный дизайн. Векторная графика: учебно-методическое пособие / Е. А. Зиновьева. — Екатеринбург: Изд-во Урал. ун-та, 2016. — 115, [8] с.

6. Larsen R., Mastering SVG: Web animations, visualizations and vector graphics with HTML, CSS and JavaScript / R. Larsen. — Birmingham: Packt Publishing, 2018. — 312 с.

@ Кортенко Л.В., Першин А.Д., Фарапонов В.О., 2021.