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

Возможности и применение.
23 августа 2017F51009b955a7535aefbaa6ecf8672b05f163b8c9Владислав Строчков216838

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 в создании так называемого эластичного дизайна, который набирает популярность среди разработчиков. «Живые» интерфейсы производят на пользователей сильное впечатление, формируют вау-эффект. Эластичный дизайн чутко реагирует на действия, не ограничивает свободу движения по страницам сайта.

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

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

Новые комментарии