Главная / Блог / Блог компании «БиАй Интеграция» / Технологии HTML5 SVG в веб-дизайне

Технологии HTML5 SVG в веб-дизайне

Сегодня на дворе век технологий и инноваций, жизненный цикл стандартов стремительно сокращается, совершенствуются и методы реализации этих стандартов. Возьмем дисплеи. Новые стандарты 4K и 5K напрямую затрагивают требования к веб-дизайну. Решать задачи растром становится все сложнее. Каков же метод реализации стандарта? Ответ есть – использование масштабируемой векторной графики, технология HTML5 SVG. 

Дисплей 5К Apple Retina

SVG - Scalable Vector Graphics, в пер. на русский «масштабируемая векторная графика». Появление этой технологии в 5-ой версии языка гипертекстовой разметки стало настоящим прорывом. Вебмастерам долгое время не хватало векторной графики, свободно поддерживаемой всеми браузерами, и возможности создавать изображения на своём клиенте, не используя Flash. Кроме того, векторное изображение — это набор математических функций, в HTML5 SVG графика имеет свой DOM, с помощью которого можно программировать объект через Java Script и задавать ему свойства через язык CSS (каскадные стили таблиц), например: фон, прозрачность или границы. И это безусловно круто. Это очень круто, черт возьми! 

Теперь перейдём к достоинствам векторной графики перед растровой (на 4K и 5K мониторах):

1. Первое и, пожалуй, самое главное достоинство — это сохранение качества при изменении размеров изображения. Качество не снижается при просмотре на больших разрешениях.
HD_4K.png

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

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

4. Четвертое преимущество — это простота редактирования SVG-изображений в текстовом или графическом редакторе, например: Adobe Illustrator или CorelDRAW. 

Появились вопросы по веб-дизайну на основе SVG? Звоните: +7 495 645 7831.
Пока еще не все веб-мастера освоили SVG. Если Вы смотрите в будущее и уже сейчас понимаете необходимость использования SVG для веб-ресурсов, наша веб-студия готова к сотрудничеству.

Возврат к списку