С появлением девайсов, оснащенных 4К и 5К дисплеями, возникли новые требования к графической части контента. И некогда популярная растровая графика перестала вписываться в тенденцию высокого разрешения. На смену ей пришел векторный аналог в лице формата SVG.
Масштабируемая векторная графика
SVG — это далеко не новый формат, под которым понимают термин «масштабируемая векторная графика». Создавать файлы с таким разрешением можно в любых векторных редакторах, платных и бесплатных: Adobe Illustrator, Inkscape и др. Этот так называемый формат в первую очередь является специальным языком разметки для объектов векторной графики, начиная с 1999 года.
Среди базовых возможностей данного выделим следующие:
- возможность описания путей от одной точки до другой через любые координаты;
- представлено описание базовых геометрических фигур, которые можно окрашивать, делать прозрачными и т.д.;
- добавлена интерактивность для каждого элемента в файле;
- есть возможность применять инструменты анимации и внедрять сценарии.
Преимущества SVG
SVG – Scalable Vector Graphics (масштабируемая векторная графика).
Изначально векторная графика возымела популярность в печати. Но именно с появлением формата SVG векторные изображения взобрались на Олимп сайтостроения. Более того, в рекомендациях W3C с 2011 года появилась прямая отсылка на SVG. Однако, данный формат до сих пор не стал широко востребованным у веб-мастеров, многие из которых, вероятно, ситуация на рынке веб-разработки еще не подтолкнула к использованию передовых технологий. SVG обладает следующими преимуществами:
- Независимость от плотности пикселей. Это, пожалуй, ключевое достоинство SVG, которого лишены растровые изображения. При увеличении размеров последних их вид разительно изменяется в худшую сторону. С векторными иллюстрациями такого произойти не может в принципе. Изображение в SVG представляет собой формулы, которые пересчитывают выходные значения вместе с изменением масштабом.
- Минимизация числа HTTP-запросов обусловлена тем, что SVG можно встроить непосредственно в веб-страницу с помощью одноименного тега.
- Возможность применения CSS и JavaScript объяснима использованием все того же тега svg.
- Простота анимирования и редактирования с помощью стилей и скриптов. Также эти объекты можно изменять в текстовом редакторе.
- SVG в отличие от растрового файла обладает значительно меньшим размером, что благоприятно сказывается на качестве загрузки всего сайта.
В заключение отметим, что SVG хорошо поддерживается большинством современных браузеров за исключением пресловутого IE до 8 версии. Впрочем, и эта проблема быстро решается внедрением библиотеки JavaScript Raphael.js.
Статья подготовлена по материалам сайта biint.ru.
