Создание иконок

Snap.svg — мощная библиотека для работы с векторной графикой в браузере на основе SVG. Создание иконок начинается с инициализации объекта Snap, который представляет рабочее пространство SVG:

var s = Snap(200, 200); // создаёт SVG размером 200x200

Это пространство станет контейнером для всех элементов иконки: фигур, линий, текста и групп.

Создание базовых форм

Иконка обычно строится из простых геометрических фигур. Snap.svg предоставляет методы для создания:

  • Прямоугольник: rect(x, y, width, height)
  • Круг: circle(cx, cy, r)
  • Эллипс: ellipse(cx, cy, rx, ry)
  • Линия: line(x1, y1, x2, y2)
  • Полигон: polygon(points)
  • Многоугольник или произвольный путь: path(d)

Пример создания круга и прямоугольника:

var circle = s.circle(50, 50, 40).attr({
    fill: "#4CAF50",
    stroke: "#333",
    strokeWidth: 3
});

var rect = s.rect(100, 20, 80, 60).attr({
    fill: "#FFC107",
    stroke: "#333",
    strokeWidth: 2
});

attr() позволяет задавать стили: fill для заливки, stroke для контура, strokeWidth для толщины линии.

Использование слоёв и группировки

Для удобного управления иконками применяется группировка элементов:

var group = s.group(circle, rect);
group.attr({opacity: 0.8});

Группы позволяют одновременно трансформировать, перемещать и изменять стиль сразу для всех элементов.

Трансформации элементов

Snap.svg поддерживает трансформации:

  • Перемещение: element.transform("t100,50")
  • Масштабирование: element.transform("s1.5,1.5")
  • Вращение: element.transform("r45,50,50")

Можно комбинировать несколько трансформаций:

rect.transform("t50,20 r30 s1.2,1.2");

Важно помнить порядок трансформаций: сначала масштабирование, потом вращение и перемещение.

Создание сложных иконок через пути

Иконки часто строятся с помощью сложных кривых. Snap.svg использует командную строку SVG Path:

  • M x,y — переместиться в точку
  • L x,y — линия до точки
  • C x1,y1 x2,y2 x,y — кубическая кривизна
  • Q x1,y1 x,y — квадратичная кривизна
  • Z — замкнуть путь

Пример иконки стрелки:

var arrow = s.path("M10,80 L90,50 L10,20 Z").attr({
    fill: "#2196F3",
    stroke: "#0D47A1",
    strokeWidth: 2
});

Пути позволяют создавать любые сложные контуры, комбинируя прямые линии и кривые.

Работа с цветом и градиентами

Snap.svg поддерживает заливки градиентами и прозрачностью:

var gradient = s.gradient("l(0, 0, 1, 1)#FF5722-#FFC107");
rect.attr({fill: gradient});
  • l — линейный градиент, r — радиальный.
  • Можно комбинировать с прозрачностью через fill-opacity.

Цвета также можно задавать через HEX, RGB или именованные цвета:

circle.attr({fill: "rgb(76, 175, 80)"});

Анимация и интерактивность

Иконки становятся динамичными с помощью animate:

circle.animate({r: 60, fill: "#F44336"}, 1000, mina.easeinout);
  • Параметры: объект атрибутов, длительность в мс, функция интерполяции.
  • Snap.svg включает набор кривых интерполяции: mina.linear, mina.easein, mina.easeout, mina.easeinout.

Интерактивность достигается через события:

circle.click(function() {
    this.animate({fill: "#FFC107"}, 500);
});

События: click, mouseover, mouseout, mousemove.

Использование символов для повторного применения

Иконки часто повторяются в интерфейсе. Snap.svg позволяет создавать символы:

var starSymbol = s.symbol();
var star = s.path("M50,15 L61,35 L85,35 L66,50 L75,70 L50,58 L25,70 L34,50 L15,35 L39,35 Z");
starSymbol.add(star);
var instance = s.use(starSymbol).attr({x: 10, y: 10});
  • symbol создаёт шаблон, который можно многократно вставлять с помощью use.
  • Экономит ресурсы и упрощает управление стилями.

Практические советы по построению иконок

  1. Сетка и размеры: Использовать координатную сетку для согласованности элементов.
  2. Пропорции: Сохранять соотношения сторон для масштабируемости.
  3. Минимализм: Упрощать формы, избегая лишних деталей.
  4. Цветовая палитра: Ограничивать количество цветов для единообразия интерфейса.
  5. Группы и символы: Разделять элементы по функционалу и использовать символы для повторяющихся объектов.

Комбинирование всех приёмов

Пример иконки «дом» с кругами, прямоугольниками и путями:

var base = s.rect(50, 70, 100, 80).attr({fill: "#8BC34A", stroke: "#33691E", strokeWidth: 3});
var roof = s.path("M50,70 L100,30 L150,70 Z").attr({fill: "#CDDC39", stroke: "#827717", strokeWidth: 3});
var door = s.rect(90, 110, 20, 40).attr({fill: "#795548", stroke: "#3E2723", strokeWidth: 2});
var houseGroup = s.group(base, roof, door);
houseGroup.transform("s1.2,1.2 t10,5");

Сочетание фигур, путей, трансформаций и атрибутов создаёт гибкую и легко настраиваемую иконку, готовую к анимации и интеграции в интерфейс.

Оглавление