Одним из лучших способов презентации графики онлайн является масштабируемая векторная графика. Все благодаря тому, что SVG может адаптироваться под любой размер экрана, без потери качества.
Что такое Snap.svg?
Snap.svg — это библиотека JavaScript, которая призвана помогать веб-разработчикам поставлять расширенные возможности SVG в интернет. Данная библиотека в состоянии загружать, анимировать, и даже создавать SVG графику прямо в браузере. Snap был создан Дмитрием Барановским, который также создал Рафаэля, но в отличие от него, данная библиотека сделана для поддержки большинства современных браузеров.
Создание простой SVG графики
После того, как вы загрузили библиотеку и включили ее в вашу страницу, первое, что вам нужно сделать, это создать элемент SVG HTML:
<svg width=”0” height=”0”></svg>
Затем, подтвердите Snap библиотеку:
var s = Snap();
Опуская параметры поверхности нашего рисунка, он автоматически будет размером 100% х 100%, но если вы хотите, задать конкретную ширину и высоту, вы можете это сделать следующим образом:
var s = Snap(800, 800);
Далее, мы можем строить простые формы:
var circle = s.circle(200, 200, 100);
Этот код создает простой круг 100px в радиусе, который расположен на 200px от верха и левой стороны нашей страницы.
Фон, по умолчанию, заполнения формы является черным, но мы можем изменить его, наряду с шириной штрихов, используя метод attr:
circle.attr({
fill: "#6A8EAB",
stroke: "#fff",
strokeWidth: 3
});Конечно же, мы можем создавать и другие формы с помощью Snap, например, прямоугольники:
var r = s.rect(100, 100, 75, 75, 5);
Этот код создает прямоугольник 100px сверху и слева от рабочей области, с шириной и высотой в 75px и радиусом границы в 5px.
Еще мы можем добавить текст:
var t = s.text(50, 50, "WebDesignMagazine");
Можно добавить такие вещи, как полигоны, эллипсы и градиенты. Если у нас есть более одного элемента на чертежной поверхности, тогда Snap позволяет сгруппировать их следующим образом:
var circles = s.group(s.circle(100, 150, 70), s.circle(200, 150, 70));
Snap дает возможность анимировать наши элементы:
circle.animate({r: 50}, 2000);Загрузка внешних элементов SVG
Одно из самых больших преимуществ Snap’а, является его возможность загружать уже существующие SVG:
Snap.load("image.svg", function (f) {
// Code
});Этот код импортирует файлы SVG, но для того, чтобы разместить их на нашей чертежной доске, мы должны добавить его:
Snap.load("image.svg", function (f) {
g = f.select("g");
s.append(g);
});Теперь он есть у нас на чертежной доске и мы можем сделать его перетаскиваемым:
g.drag();
И, как элементы, которые мы видели ранее, мы также можем изменить атрибуты наших изображений такие, как цвет заливки или штрихи (Stroke). Но это нужно сделать до того, как изображение добавляется на доску:
f.select("polygon[fill='#000']").attr({fill: "#FF0000"});Как вы видите, метод select позволяет нам делать поиск через элементы. В данном случае, мы ищем любые многоугольники (polygon) с черным фоном, а затем меняем их на красный.
А вы уже используете эту библиотеку в своих проектах? Если да, оставьте в комментариях – очень интересно посмотреть на готовый вариант.
Высоких конверсий!
