Importar SVG en Konva: elige una imagen o trazados editables

Usa Konva.Image cuando quieras colocar un SVG completo en un lienzo. Usa nodos Konva.Path independientes cuando tu aplicación necesite cambiar el color o manipular formas de trazado individuales. Cargar una imagen SVG no crea automáticamente un objeto Konva para cada elemento que contiene. La guía SVG de Konva los describe como enfoques diferentes.

Para un selector de logotipos o una herramienta de composición, una imagen puede bastar. Para una insignia de dos colores cuyas regiones necesitan controles separados, la estructura de objetos importa. Decide qué debe editar el usuario antes de elegir el método de carga y conserva el original SVG junto a la escena del lienzo.

Elige la representación antes de importar

El tutorial de Path de Konva acepta datos de trazado SVG mediante data. Ese es el valor del atributo d de un trazado, no el documento SVG completo. Copiar solo los valores d no transfiere la transformación del grupo padre, el color heredado ni el comportamiento del viewBox del SVG.

También hay una cuestión independiente sobre el archivo original: ¿contiene trazados el SVG? Usa la guía de inspección de imágenes rasterizadas incrustadas cuando la ilustración sea un mapa de bits envuelto en SVG. Un SVG válido basado en trazados puede convertirse igualmente en un único nodo de imagen en Konva; eso no convierte el archivo original en un falso vector.

Un ejemplo de dos colores con una prueba de relleno visible

La marca original siguiente contiene dos trazados creados manualmente con rellenos explícitos. El lienzo izquierdo carga ambos como una imagen. El derecho construye dos nodos Path con la misma geometría. Ambos reciben una solicitud de relleno rosa y una escala de 1.3.

El rectángulo rosa de la izquierda es una prueba útil: imageNode.fill() cambia el fondo de la forma de imagen, mientras que las regiones opacas verde y amarilla conservan sus colores originales. A la derecha, paths[0].fill() cambia solo la primera región. Esta prueba usa geometría original, no un resultado de conversión de PerfectVector.

Guarda lo siguiente como archivo HTML y sírvelo mediante tu servidor de desarrollo local. Fija Konva 10.6.0, crea dos escenarios de 320 × 240 y espera a que se decodifique la imagen SVG antes de dibujar. El código es la misma comparación usada para la captura.

<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>

En este ejemplo deliberadamente pequeño, cada trazado tiene su propia pintura y usa las mismas coordenadas. El grupo da a los dos trazados editables una posición y escala comunes. Cambiar la escala del grupo conserva el data de cada trazado; cambia dónde y con qué tamaño se dibuja el grupo.

Para un archivo SVG existente de confianza que solo necesita colocarse como imagen completa, el tutorial de Image muestra el flujo habitual de carga de imágenes. Carga la URL SVG como imagen, espera a que se cargue y pásala a Konva.Image. Un componente React que renderiza marcado SVG es un valor diferente del objeto de imagen que espera el lienzo.

Transfiere más que los datos de trazado si la ilustración es compleja

La matriz parts del ejemplo es un modelo explícito para dos formas conocidas. No es un importador SVG. Antes de usar un enfoque similar con una ilustración exportada, inspecciona qué crea su aspecto:

• Una transformación de grupo puede mover, girar o escalar todos sus hijos. Conserva esa relación o incorpora deliberadamente la transformación a la geometría.
• La pintura puede proceder de un antecesor o de una regla CSS. Resuelve el relleno y el trazo previstos en lugar de suponer que cada trazado los declara.
• Los degradados, recortes, máscaras y filtros tienen sus propias definiciones y referencias. Copiar una cadena d no reconstruye esos efectos.
• El texto y las formas básicas pueden necesitar un tratamiento independiente. No supongas que todos los objetos visibles ya son trazados.

Mantén una representación del original junto a la reconstrucción durante las pruebas. Empieza por una región reconocible, compara su posición y color y después añade las formas restantes. La guía de edición SVG cubre la limpieza del original cuando la estructura de objetos dificulta el trabajo.

Si no necesitas controles para trazados individuales, cargar el SVG completo como imagen puede evitar ese trabajo de reconstrucción. Konva también documenta cómo renderizar SVG con una biblioteca externa como canvg y colocar el lienzo resultante en Konva.Image. Sigue siendo una representación de imagen; no proporciona al usuario nodos Konva separados para cada trazado original. Consulta las opciones documentadas.

Si la ilustración solo necesita otro color de origen, otro método consiste en actualizar el propio SVG y volver a cargar su imagen. El mantenedor de Konva describe ese flujo en la incidencia 530 de react-konva. Usa una edición estructurada adecuada para tu SVG conocido, en lugar de sustituir indiscriminadamente todos los rellenos y perder diferencias de color intencionadas.

Trata la exportación del lienzo como una entrega rasterizada

El ejemplo llama a pathScene.stage.toDataURL({ pixelRatio: 2 }). Su escenario de 320 × 240 produce un PNG decodificado de 640 × 480. Aumentar pixelRatio cambia las dimensiones en píxeles exportadas; no convierte el PNG en un SVG editable. La documentación de exportación de Konva explica este ajuste.

Mantén separadas estas tres entregas:

1. El SVG original, para edición vectorial y comparación.
2. Los datos de escena de tu aplicación, incluidas las referencias de trazados o imágenes y las ediciones que admite.
3. Un PNG u otra exportación rasterizada, para usos que necesiten una imagen renderizada.

Vuelve a abrir el PNG exportado e inspecciona sus dimensiones y detalles pequeños. Prueba también la imagen SVG en los navegadores que admite tu aplicación; la guía SVG de Konva señala diferencias de compatibilidad de renderizado. Este ejemplo prueba un SVG sencillo y autónomo, por lo que no demuestra compatibilidad con todos los archivos o efectos exportados.

Evita evaluar la calidad vectorial solo por la vista previa del lienzo. La guía de SVG pixelado separa la geometría original de las vistas previas rasterizadas y del tamaño de visualización.

Cuándo ayuda PerfectVector con el original

Si tu recurso inicial solo es un motivo PNG o JPG, PerfectVector puede ayudar a reconstruir geometría SVG editable antes de crear la escena Konva. Convierte la imagen en vector, abre el resultado en un editor e inspecciona la silueta, los huecos y las regiones de color antes de trasladar trazados a tu aplicación.

La vectorización no crea un modelo de escena Konva ni un analizador para documentos SVG arbitrarios. Tú sigues eligiendo la representación y transfiriendo las propiedades que necesita. Si ya tienes un archivo maestro SVG utilizable, trabaja desde él. Para fotografías o texturas pintadas que deben seguir siendo píxeles, un nodo de imagen suele ser la representación adecuada sin vectorizar.

Comprueba la importación con tu propia ilustración

Antes de añadir un SVG a un editor reutilizable:

1. Elige un nodo de imagen completa o nodos de formas separados según los controles que necesite el usuario.
2. Cambia el color de una región y confirma que solo cambia el objeto previsto.
3. Redimensiona el diseño completo y comprueba los espacios, el aspecto de los trazos y los recortes.
4. Exporta con las dimensiones en píxeles necesarias y vuelve a abrir el archivo rasterizado.
5. Vuelve a abrir de forma independiente el archivo maestro SVG guardado para que una exportación del lienzo nunca se convierta en tu única copia.

Preguntas frecuentes

¿Konva.Image hace editables los trazados de un SVG? No. Muestra el SVG como un único nodo de imagen. Para controlar regiones de trazados individuales, crea nodos Path separados a partir de datos adecuados o usa un flujo de edición SVG que conserve la estructura del documento.

¿Por qué fill añade un rectángulo en lugar de cambiar el color de mi SVG? En un nodo Image, el relleno pinta la forma de imagen detrás de su contenido. No reescribe los rellenos dentro del SVG. Edita el SVG original y vuelve a cargarlo o usa nodos Path separados cuando tu aplicación necesite controles de color individuales.

¿Aumentar pixelRatio exporta un archivo vectorial? No. En este ejemplo, pixelRatio 2 produce un PNG con el doble de anchura y altura del escenario. Conserva el original SVG por separado para editarlo como vector.

Fuentes

1. Konva — SVG en lienzo — Explica las opciones Image, Path y de renderizadores externos y los límites de compatibilidad de navegadores.
2. Konva — tutorial de Path — Documenta la construcción de un Path con datos de trazado SVG y propiedades de pintura explícitas.
3. Konva — tutorial de Image — Muestra cómo cargar una imagen y colocarla en una escena Konva.
4. Konva — exportación de imágenes de alta calidad — Explica la exportación rasterizada y el efecto de pixelRatio en las dimensiones de salida.
5. Konva — incidencia 530 de react-konva — Registra el método del mantenedor de editar el original y volver a cargarlo para cambiar los colores de imágenes SVG.

¿Empiezas con un icono que solo existe rasterizado? Convierte tu imagen en trazados SVG, inspecciona las regiones de color recuperadas y prueba una región en Konva antes de conectar el resto del editor.