Импорт SVG в Konva: изображение или редактируемые контуры

Используйте Konva.Image, если нужно разместить полный SVG на canvas. Используйте отдельные узлы Konva.Path, если приложение должно перекрашивать или изменять отдельные фигуры, заданные контурами. Загрузка изображения SVG не создает автоматически объект Konva для каждого внутреннего элемента. Руководство Konva по SVG описывает это как разные подходы.

Для выбора логотипа или инструмента композиции одного изображения может хватить. Для двухцветного значка, областям которого нужны отдельные настройки, важна структура объектов. Определите, что пользователь должен редактировать, перед выбором загрузчика и храните исходник SVG рядом со сценой canvas.

Выберите представление перед импортом

Урок Konva по Path принимает данные контура SVG через data. Это значение атрибута d контура, а не полный документ SVG. Копирование только d не переносит преобразование родительской группы, наследуемый цвет или поведение viewBox SVG.

Есть и отдельный вопрос исходного файла: содержит ли SVG вообще контуры? Используйте руководство по проверке встроенного растра, если графика — растр, завернутый в SVG. Корректный SVG с контурами тоже может стать одним узлом изображения в Konva; это не делает исходный файл псевдовектором.

Двухцветный пример с видимой проверкой заливки

Оригинальный знак ниже содержит два написанных вручную контура с явными заливками. Левый canvas загружает оба одним изображением. Правый строит два узла Path из той же геометрии. Оба получают запрос розовой заливки и масштаб 1.3.

Розовый прямоугольник слева — полезное доказательство: imageNode.fill() меняет фон фигуры изображения, а непрозрачные зеленая и желтая области сохраняют исходные цвета. Справа paths[0].fill() меняет только первую область. Этот тест использует оригинальную геометрию, а не результат конвертации PerfectVector.

Сохраните следующий код как HTML-файл и отдавайте через локальный сервер разработки. Он закрепляет Konva 10.6.0, создает две сцены 320 × 240 и ждет декодирования SVG перед рисованием. Это тот же код сравнения, который использован для снимка.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

В этом намеренно небольшом примере каждый контур имеет свое оформление и использует одинаковые координаты. Группа задает двум редактируемым контурам одно положение и масштаб. Изменение масштаба группы оставляет data каждого контура нетронутым, меняя место и размер рисования группы.

Для существующего доверенного SVG, которому нужно только размещение целиком, урок по Image показывает обычный процесс загрузки изображения. Загрузите URL SVG как изображение, дождитесь загрузки, затем передайте его в Konva.Image. Компонент React, выводящий разметку SVG, — другое значение, чем объект изображения, ожидаемый canvas.

Переносите больше, чем данные контура, для сложной графики

Массив parts примера — явная модель двух известных фигур, а не импортер SVG. Перед применением похожего подхода к экспортированной графике проверьте, что создает ее внешний вид:

• Преобразование группы может перемещать, поворачивать или масштабировать всех потомков. Сохраните эту связь или осознанно примените преобразование к геометрии.
• Оформление может происходить от предка или правила CSS. Определите нужные заливку и обводку вместо предположения, что каждый контур объявляет их сам.
• Градиенты, обрезка, маски и фильтры имеют собственные определения и ссылки. Скопированная строка d не восстанавливает эти эффекты.
• Текст и базовые фигуры могут требовать отдельной обработки. Не предполагайте, что каждый видимый объект уже является контуром.

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

Если индивидуальные настройки контуров не нужны, загрузка полного SVG как изображения может избавить от восстановления. Konva также описывает рендеринг SVG внешней библиотекой вроде canvg с последующим размещением полученного canvas в Konva.Image. Это остается представлением изображения и не дает пользователю отдельные узлы Konva для каждого исходного контура. Посмотрите документированные варианты.

Для графики, которой нужен только другой исходный цвет, можно изменить сам SVG и перезагрузить изображение. Разработчик Konva описывает этот процесс в задаче react-konva 530. Используйте структурное редактирование под известный SVG вместо безразборной замены всех заливок с потерей намеренных различий цветов.

Рассматривайте экспорт canvas как растровый результат

Пример вызывает pathScene.stage.toDataURL({ pixelRatio: 2 }). Сцена 320 × 240 дает декодированный PNG 640 × 480. Увеличение pixelRatio меняет выходные пиксельные размеры, а не превращает PNG в редактируемый SVG. Документация экспорта Konva объясняет настройку.

Храните отдельно три результата:

1. Исходный SVG для векторного редактирования и сравнения.
2. Данные сцены приложения, включая ссылки на контуры или изображения и поддерживаемые приложением изменения.
3. PNG или другой растровый экспорт для случаев, где нужна отрендеренная картинка.

Снова откройте экспортированный PNG и проверьте размеры и мелкие детали. Также протестируйте изображение SVG в поддерживаемых браузерах: руководство Konva по SVG отмечает различия совместимости рендеринга. Пример проверяет один простой самостоятельный SVG и не подтверждает поддержку каждого экспортированного файла или эффекта.

Не оценивайте качество вектора только по предпросмотру canvas. Руководство по пикселизированному SVG отделяет исходную геометрию от растровых предпросмотров и размеров отображения.

Когда PerfectVector помогает с исходником

Если исходный ресурс — только мотив PNG или JPG, PerfectVector может помочь восстановить редактируемую геометрию SVG до построения сцены Konva. Преобразуйте изображение в вектор, откройте результат в редакторе и проверьте силуэт, отверстия и цветовые области перед переносом контуров в приложение.

Векторизация не создает модель сцены Konva или парсер произвольного SVG. Вы все равно выбираете представление и переносите нужные ему свойства. Если пригодный оригинал SVG уже есть, работайте с ним. Для фотографии или живописной текстуры, которая должна остаться пикселями, узел изображения часто подходит без трассировки.

Проверьте импорт на своей графике

Перед добавлением SVG в универсальный редактор:

1. Выберите один узел полного изображения или отдельные узлы фигур по нужным пользователю настройкам.
2. Измените цвет одной области и подтвердите изменение только нужного объекта.
3. Измените размер всего дизайна и проверьте интервалы, вид обводки и обрезку.
4. Экспортируйте в нужных пиксельных размерах и снова откройте растр.
5. Независимо откройте сохраненный оригинал SVG, чтобы экспорт canvas никогда не стал единственной копией.

Частые вопросы

Делает ли Konva.Image контуры внутри SVG редактируемыми? Нет. Он показывает SVG одним узлом изображения. Для управления отдельными областями контуров создайте отдельные узлы Path из подходящих данных или используйте процесс редактирования SVG, сохраняющий структуру документа.

Почему fill добавляет прямоугольник вместо перекрашивания SVG? У узла Image заливка окрашивает фигуру изображения позади его содержимого. Она не переписывает заливки внутри SVG. Измените исходный SVG и перезагрузите его либо используйте отдельные узлы Path, если приложению нужны индивидуальные настройки цвета.

Экспортирует ли увеличение pixelRatio векторный файл? Нет. В этом примере pixelRatio 2 создает PNG с удвоенными шириной и высотой сцены. Храните исходный SVG отдельно для векторного редактирования.

Источники

1. Konva — SVG on canvas — Объясняет варианты Image, Path и внешнего рендерера и ограничения совместимости браузеров.
2. Konva — Path tutorial — Описывает создание Path из данных контура SVG и явных свойств оформления.
3. Konva — Image tutorial — Показывает загрузку изображения и размещение в сцене Konva.
4. Konva — High-quality image export — Объясняет растровый экспорт и влияние pixelRatio на выходные размеры.
5. Konva — react-konva issue 530 — Фиксирует подход разработчика к смене цветов SVG через редактирование исходника и перезагрузку.

Начинаете с растровой иконки? Превратите изображение в контуры SVG, проверьте восстановленные цветовые области и протестируйте одну область в Konva перед подключением остального редактора.