SVG для устройств

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

Развитие SVG стартовало с версии 1.1, появившейся в 2011 году. Выход актуализированной версии 2.0 состоится предположительно в 2017 году. 

Достоинства SVG для мобильных

• Отличная визуализация без потери качества.
• Малый вес объектов SVG по сравнению с растровыми.
• Возможность менять атрибуты и стили SVG-элементов с использованием JavaScript и CSS3.
• Высокая эффективность микровзаимодействий и визуальных коммуникаций.
• Наличие прозрачного фона.
• Упрощенный процесс создания и редактирования файлов.
• Возможность gzip-сжатия и оптимизации без потери качества.

Достоинства SVG для десктопов

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

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

Эластичная анимация

Сложно переоценить возможности SVG в создании так называемого эластичного дизайна, который набирает популярность среди разработчиков. «Живые» интерфейсы производят на пользователей сильное впечатление, формируют вау-эффект. Эластичный дизайн чутко реагирует на действия, не ограничивает свободу движения по страницам сайта.

В эластичном дизайне:

• Элементы тесно взаимосвязаны и функционируют в едином пространстве.
• Все унифицировано (предусмотрена адаптация под любые разрешения).
• Каждый элемент чутко реагирует на действия пользователя.
• Предусмотрено максимум возможностей для создания удобного, отзывчивого интерфейса.