Роль SVG в эластичном дизайне

Руководитель проектов AFFINAGE Игорь Яковлев публикует в блоге «Нетологии» серию материалов об эластичном дизайне. Сегодня речь пойдет о роли SVG.

Что такое SVG

Scalable Vector Graphics — масштабируемая векторная графика. Реальное развитие началось с версии 1.1 опубликованной W3C в 2011 году. Анонс улучшенной версии 2.0, превосходящей возможности flash, намечен на 2017 год.

Благодаря языку разметки XML, легко встраивается в HTML-документ. С выходом версии 2.0 интернет заполонит SVG-анимация, SVG-фильтры, SVG-маски и прочие прелести. Кажется, это было когда флеш заполонил интернет. Скоро будет то же самое.

Но мы с вами люди образованные и «лезть в воду не зная броду» не собираемся, поэтому попытаемся выжать максимум из текущей и будущей ситуации.

Немного истории

Между смертью flash и «самопиаром» SVG был ещё такой формат FXG. Видимо поняв, что SVG не обогнать, Adobe закрыла FXG. Но приятный осадочек остался.

Именно из FXG, формата векторной графики для импорта/экспорта из различных программ Adobe, мы узнали, что можно не только описать векторный документ в виде XML, но и задать множество других параметров необходимых графическим редакторам: страницы, слои, анимация, правила вертикального совмещения объектов и прочее.

Почуяв неладное Microsoft, разрабатывает XAML для своих внутренних нужд (основанный на XML язык разметки для программирования приложений). И именно в этот момент SVG обретает второе дыхание.

К чему преамбулы, ближе к делу

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

Опустим перечисление SVG-элементов, коснёмся только одного. Наибольший интерес для нас представляет path, так как с его помощью можно нарисовать любую фигуру.

Возможность встраивания SVG в HTML даёт возможность управлять SVG-элементами и их атрибутами с помощью JS. На картинках ниже показано, что мы можем дотянуться не только до самих точек, а так же до кривых безье.

Любой графический редактор, обладающий возможностью работы с векторной графикой, имеет path-панель.

Наша задача нарисовать начальное и конечное положение кривых. А анимацию на html-странице описать Javascript’ом.

Наши кривые с картинок в виде XML (они не с картинок).

Программирование анимации (изменение X,Y-координат у точек) будет выглядеть примерно так:

1. M 166.5 142.5 L 518 182.5 L 885.5 142.5

2. M 166.5 150 L 518 190 L 885.5 150

3. M 166.5 155 L 518 195 L 885.5 155

4. …

5. M 166.5 350 L 518 170 L 885.5 350

6. M 166.5 355 L 518 175 L 885.5 355

7. M 166.5 362.5 L 518 322.5 L 885.5 362.5

Важно чтобы количество точек совпадало. Если мы хотим сделать выпуклый квадрат. Нужно нарисовать квадрат с 8-ю точками.

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

Причем тут эластичный дизайн

В далёком 2014 год, для нас это было феноменальным прорывом. Мы просто решили вырастить дерево!

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

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

Как сказал один наш клиент: «Как желе, дрожит от любого прикосновения».

Мы стоим на пороге, когда плоский дизайн обязан стать живым и отзывчивым на действия пользователя. Эластичных элементов будет становиться всё больше и больше.

Правила эластичного дизайна

• Элементы не живут сами по себе. Каждый элемент зависит от другого, создавая пространство единой системы взаимосвязей.

• Эластичный дизайн адаптируется под любые разрешения.

• Каждый элемент дает обратную связь на действия пользователя. У пользователя не должно остаться сомнений о совершении того или иного действия. 

• Эластичный дизайн направлен в первую очередь на удобство интерфейсов.

Итог

Роль SVG в эластичном дизайне сводится к анимированию, гибкости, текучести, взаимозависимости, плавности, наложению слоёв… Вообщем сделать flat живым!

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.