Изображения и встраивание растровой графики

Библиотека SVG.js предоставляет удобный и мощный способ работы с векторной графикой в браузере, включая возможность интеграции растровых изображений. Основным элементом для вставки изображений является объект image, который создаёт тег <image> в SVG-документе.

Создание и добавление растрового изображения

Для вставки растрового изображения используется метод image(src, width, height), где src — путь к файлу (локальный или URL), width и height — размеры изображения:

const draw = SVG().addTo('body').size(600, 400);

const img = draw.image('example.png', 200, 150).move(50, 50);
  • move(x, y) задаёт позицию изображения на холсте.
  • Если размеры не указаны, SVG автоматически использует исходные размеры изображения.

Масштабирование и адаптация размеров

Изображения можно масштабировать с помощью методов size(width, height) и scale(factor):

img.size(300, 225); // Задать конкретные размеры
img.scale(1.5);     // Увеличение в 1.5 раза

Использование scale изменяет изображение пропорционально, сохраняя соотношение сторон, тогда как size задаёт точные размеры, что может привести к искажению пропорций.

Обрезка и рамки (viewBox и clip)

Для ограничения области отображения используется метод viewbox и элемент clipPath:

const clip = draw.clip().rect(100, 100).move(50, 50);
img.clipWith(clip);
  • clip().rect(width, height) создаёт прямоугольную область отсечения.
  • Метод clipWith применяет её к изображению, позволяя отображать только нужную часть.

Прозрачность и стили

SVG.js поддерживает управление прозрачностью и стилями изображений:

img.opacity(0.7);       // Установить прозрачность
img.fill('none');        // Изображение не перекрашивается
img.stroke({ width: 2, color: '#000' }); // Можно добавить рамку

Прозрачность полезна для наложения изображений друг на друга без потери контекста. Методы fill и stroke позволяют создавать декоративные эффекты, например, обводку растровых картинок.

Анимация изображений

Для создания динамичных эффектов изображение можно анимировать:

img.animate(2000, '<>').move(300, 50).rotate(45);
  • Первый параметр — длительность анимации в миллисекундах.
  • Второй — тип анимации (<> для плавного эффекта).
  • Методы move, rotate, scale могут быть объединены для комплексной анимации.

Встраивание изображений через Base64

Для интеграции изображений без внешних ссылок используется Base64-кодировка:

const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
draw.image(base64Image, 200, 150).move(100, 100);

Такой способ полезен при создании автономных SVG-документов и при передаче данных через JSON или API.

Сочетание растровых и векторных элементов

SVG.js позволяет комбинировать изображения с векторной графикой для создания сложных композиций:

const circle = draw.circle(100).fill({ color: '#f06' }).move(150, 150);
img.maskWith(circle); // Используем круг как маску
  • maskWith применяет любой SVG-элемент в качестве маски.
  • Это открывает возможности для создания нестандартных форм изображения и декоративных эффектов.

Эффекты и фильтры

Для добавления визуальных эффектов используется система фильтров SVG:

const blur = draw.filter().blur(5);
img.filter(blur);
  • blur(radius) создаёт эффект размытия.
  • Можно комбинировать несколько фильтров, включая цветовые коррекции, тени и деформации.

Управление слоями и группировка

Изображения удобно организовывать в группы:

const group = draw.group();
group.add(img);
group.add(draw.rect(200, 150).fill('none').stroke({ width: 2, color: '#00f' }));
group.move(50, 50);
  • group позволяет перемещать и трансформировать несколько элементов одновременно.
  • В группах можно комбинировать растровые изображения, векторные фигуры и текст.

Вывод

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

Оглавление