WebDesignMagazine.ru – Журнал о веб-дизайне

Знакомство с библиотекой Snap.svg

1

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

Повышенный спрос на данный формат привел нас к открытому исходнику(Open Source) – Snap.svg библиотеке.

Что такое Snap.svg?

Snap.svg —  это библиотека JavaScript, которая призвана помогать веб-разработчикам поставлять расширенные возможности SVG в интернет. Данная библиотека в состоянии загружать, анимировать, и даже создавать SVG графику прямо в браузере. Snap был создан Дмитрием Барановским, который также создал Рафаэля, но в отличие от него, данная  библиотека сделана для поддержки большинства современных браузеров.

Создание простой SVG графики

После того, как вы загрузили библиотеку и включили ее в вашу страницу, первое, что вам нужно сделать, это создать элемент SVG HTML:

Затем, подтвердите Snap библиотеку:

Опуская параметры поверхности нашего рисунка, он автоматически будет размером 100% х 100%, но если вы хотите, задать конкретную ширину и высоту, вы можете это сделать следующим образом:

Далее, мы можем строить простые формы:

Этот код создает простой круг 100px в радиусе, который расположен на 200px от верха и левой стороны нашей страницы.

Фон, по умолчанию, заполнения формы является черным, но мы можем изменить его, наряду с шириной штрихов, используя метод attr:

Конечно же, мы можем создавать и другие формы с помощью Snap, например, прямоугольники:

Этот код создает прямоугольник 100px сверху и слева от рабочей области, с шириной и высотой в 75px и радиусом границы в 5px.

Еще мы можем добавить текст:

Можно добавить такие вещи, как полигоны, эллипсы и градиенты. Если у нас есть более одного элемента на чертежной поверхности, тогда Snap позволяет сгруппировать их следующим образом:

Snap дает возможность анимировать наши элементы:

Загрузка внешних элементов SVG

Одно из самых больших преимуществ Snap’а, является его возможность загружать уже существующие SVG:

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

Теперь он есть у нас на чертежной доске и  мы можем сделать его перетаскиваемым:

И, как элементы, которые мы видели ранее, мы также можем изменить атрибуты наших изображений такие, как цвет заливки или штрихи (Stroke). Но это нужно сделать до того, как изображение добавляется на доску:

Как вы видите, метод select позволяет нам делать поиск через элементы. В данном случае, мы ищем любые многоугольники (polygon) с черным фоном, а затем меняем их на красный.

Скачать Snap.svg c гитхаба

А вы уже используете эту библиотеку в своих проектах? Если да, оставьте в комментариях – очень интересно посмотреть на готовый вариант.

Поделиться:
  • http://prilovski.ru Алексей

    Куда интереснее было бы узнать, как этот фреймворк работает с анимациями

    Рейтинг: 0