Importación de SVG en Fabric.js: conserva ilustraciones editables en el lienzo

Para importar un SVG editable en Fabric.js, espera el resultado de loadSVGFromString() o loadSVGFromURL() y añade los objetos devueltos a un lienzo. Conserva una referencia a la parte que quieras editar, cambia su relleno y exporta con canvas.toSVG(). Cargar la ilustración como imagen ofrece otro modelo de edición: seleccionar esa imagen no permite acceder a cada región de color como forma independiente.

La diferencia importa en un configurador de productos, editor de emblemas o icono recoloreable. Necesitas objetos que correspondan a las piezas que el usuario puede cambiar. Que un archivo termine en .svg no garantiza esa estructura.

Este tutorial utiliza Fabric.js 7.4.0 y una lámpara pequeña creada manualmente. Prueba tres formas a través de la importación, el cambio de color y la exportación. Es un ejemplo de código original, no una conversión de PerfectVector ni una afirmación de que todas las funciones de SVG sobrevivan al mismo recorrido.

Elige el modelo de objetos antes que el cargador

Fabric.js analiza el SVG y lo convierte en sus propios objetos de lienzo. Editas esos objetos mediante la API de Fabric; no son elementos activos del DOM SVG dentro del lienzo. La referencia actual de loadSVGFromString documenta una promesa que se resuelve con el resultado del análisis y una función reviver que recibe cada elemento original y su objeto creado.

No deduzcas la estructura de objetos por su apariencia. Dos colores pueden pertenecer a trazados separados, mientras que varias islas desconectadas pueden pertenecer a un único trazado. La guía para desagrupar SVG explica ese diagnóstico del archivo original.

Ejecuta un ejemplo pequeño de importación, cambio de color y exportación

Empieza en una carpeta vacía. Instala la dependencia con la versión fijada:

npm install --save-exact fabric@7.4.0

Guarda esto como index.html:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Fabric SVG import test</title>
<canvas id="editor" width="320" height="240"></canvas>
<button id="recolor">Recolor shade</button>
<button id="export">Export SVG</button>
<div id="output"></div>
<pre id="report"></pre>
<script type="module" src="main.js"></script>
</html>

Guarda esto como main.js. La ruta relativa del módulo permite ejecutar este pequeño ejemplo sin un empaquetador. En una aplicación empaquetada, importa los mismos nombres desde fabric.

import { Canvas, loadSVGFromString } from './node_modules/fabric/dist/index.min.mjs';
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
  <path id="shade" fill="#e6a23c" d="M115 40 H205 L230 135 H90 Z"/>
  <rect id="stem" x="151" y="135" width="18" height="57" fill="#214c54"/>
  <path id="base" fill="#214c54" d="M110 192 H210 L220 210 H100 Z"/>
</svg>`;
const canvas = new Canvas('editor', { width: 320, height: 240 });
const parts = new Map();
const parsed = await loadSVGFromString(svg, (element, object) => {
  const id = element.getAttribute('id');
  if (id) parts.set(id, object);
});
canvas.add(...parsed.objects.filter(Boolean));
canvas.requestRenderAll();
function report(exported) {
  const xml = new DOMParser().parseFromString(exported, 'image/svg+xml');
  const data = {
    version: '7.4.0',
    importedObjects: canvas.getObjects().length,
    types: canvas.getObjects().map(object => object.type),
    shadeFill: parts.get('shade').fill,
    exportedPaths: xml.querySelectorAll('path').length,
    exportedRects: xml.querySelectorAll('rect').length,
    exportedImages: xml.querySelectorAll('image').length,
  };
  document.querySelector('#report').textContent = JSON.stringify(data, null, 2);
  document.querySelector('#output').innerHTML = exported;
}
document.querySelector('#recolor').onclick = () => {
  parts.get('shade').set('fill', '#397e86');
  canvas.requestRenderAll();
  document.querySelector('#report').textContent = 'Shade recolored. Export to check delivery SVG.';
};
document.querySelector('#export').onclick = () => report(canvas.toSVG());
report(canvas.toSVG());

Sirve la carpeta por HTTP en lugar de abrir directamente el archivo HTML. Por ejemplo, si tienes Python instalado, ejecuta python3 -m http.server 8000 y abre http://localhost:8000. Pulsa Recolor shade y después Export SVG. El botón renderiza la cadena exportada debajo del lienzo; no descarga un archivo.

Esta demostración solo inserta en la vista previa la exportación de su propio ejemplo fijo. No reutilices esa vista previa con innerHTML como un controlador general de subidas de SVG no confiables. El ejemplo también omite la gestión de errores y la validación de archivos a nivel de aplicación.

El mapa captura los ID originales durante el análisis. El cambio de color accede a la pantalla de la lámpara mediante esa referencia explícita en lugar de suponer que el primer objeto devuelto es siempre la parte deseada. En un editor de producción, decide cómo almacenar esos identificadores y referencias al guardar y volver a abrir un documento.

Qué mostró la prueba

Nuestro ejemplo se importó como tres objetos: path, rect y path. Después de cambiar la pantalla de #e6a23c a #397e86, la vista previa exportada mostró el nuevo color de la pantalla mientras el soporte y la base conservaron su relleno oscuro original. La exportación contenía dos trazados, un rectángulo y ningún elemento de imagen.

Estas comprobaciones demuestran que este ejemplo sigue siendo geometría vectorial tras exportarlo. No demuestran que se conserven el XML original, la agrupación, las reglas CSS ni todas las funciones utilizadas por otro archivo. Conserva el maestro original y compara una copia de entrega en la aplicación que la recibirá.

Evita mezclar tutoriales con callbacks y la API de promesas

Los ejemplos antiguos suelen llamar a fabric.loadSVGFromString(svg, callback) y esperar que ese callback reciba todo el conjunto de objetos. Esa no es la función del segundo argumento en la API actual: es un reviver por objeto. Espera el resultado del análisis para obtener la colección completa.

La guía de migración a 6.0 de Fabric explica el cambio a importaciones con nombre y API basadas en promesas. Comprueba la versión instalada del paquete antes de adaptar un fragmento antiguo; sustituir únicamente la instrucción de importación deja incorrecta la lógica de carga.

Para un archivo SVG del mismo origen, el punto de partida equivalente es:

import { loadSVGFromURL } from 'fabric';
const parsed = await loadSVGFromURL('/artwork.svg');
canvas.add(...parsed.objects.filter(Boolean));
canvas.requestRenderAll();

La documentación de loadSVGFromURL indica que obtiene el SVG y debe respetar la política de mismo origen. Si el servidor remoto no permite tu origen, cambiar el código de agrupación no solucionará el fallo de red. Prueba primero un archivo servido por tu propia aplicación y luego inspecciona la solicitud fallida y la configuración CORS del servidor remoto.

Comprueba la capacidad de edición por separado de la apariencia

Un renderizado correcto responde a una pregunta: ¿apareció algo? Un editor necesita más comprobaciones.

1. Selecciona la región que debe cambiar. Confirma que otra parte no cambie con ella.
2. Cambia el color mediante el método set del objeto y solicita un renderizado, como hace el ejemplo.
3. Exporta y abre el resultado de forma independiente. La API Canvas.toSVG de Fabric genera marcado SVG a partir del estado del lienzo.
4. Inspecciona todo aquello de lo que dependa tu ilustración real, como trazos, recortes, degradados, texto o transformaciones anidadas. El ejemplo sencillo anterior no prueba esas funciones.
5. Guarda, vuelve a abrir y repite la edición prevista en tu propio editor antes de dar el flujo por terminado.

Si la importación produce un objeto de imagen, examina el original en busca de un raster incrustado. La guía sobre contenido raster dentro de SVG muestra por qué un contenedor SVG no proporciona trazados editables a los píxeles. Si el original ya tiene formas vectoriales utilizables, trabaja en la importación y la organización de objetos en lugar de volver a vectorizarlo.

Cuando una ilustración raster necesita una conversión previa

Si tu único original es un PNG o JPG plano y los usuarios necesitan editar sus regiones de color, el flujo de imagen a vector de PerfectVector puede ayudarte a preparar un SVG candidato. Compara el resultado con el original, inspecciona los trazados y comprueba si las regiones que necesitas se pueden editar de forma independiente antes de importarlo en Fabric.js.

La vectorización no asigna significados específicos de la aplicación, como pantalla, soporte o base. Los nombres de nuestro ejemplo se crearon deliberadamente. Añade tu propio mapa de partes y tus reglas de edición después de inspeccionar la geometría convertida. Para un conjunto de iconos reutilizable, el flujo de PNG a SVG para un kit de interfaz explica la preparación del original y las comprobaciones de consistencia.

Conserva las fotografías como raster cuando deban seguir siendo fotografías. Conserva un SVG original adecuado cuando ya contenga las formas que necesitas. La introducción a la vectorización puede ayudarte a decidir si vectorizar tiene sentido en el flujo.

Preguntas frecuentes

¿Fabric.js importa SVG como trazados editables? Puede analizar contenido SVG compatible y convertirlo en objetos de Fabric. La capacidad de edición depende de la estructura original: un trazado, un grupo de formas y un raster incrustado no ofrecen las mismas opciones de edición. Inspecciona los objetos devueltos y prueba el cambio concreto que necesitas.

¿Por qué falla un ejemplo antiguo de loadSVGFromString? Los tutoriales antiguos pueden esperar un callback de finalización como segundo argumento. La API actual devuelve una promesa y utiliza ese argumento como reviver por objeto. Ajusta el código a la versión instalada y espera el resultado del análisis.

¿toSVG conserva exactamente el archivo original? No esperes un documento original idéntico. Genera SVG a partir del estado del lienzo de Fabric. Conserva el maestro original y verifica la apariencia exportada y las estructuras que necesita el flujo receptor.

¿Importar un PNG puede hacer editables sus regiones individuales? Colocar un PNG no lo vectoriza en regiones vectoriales separadas. Si esas ediciones son necesarias, prepara primero una geometría vectorial adecuada, inspecciona las partes resultantes y define sus funciones en tu aplicación.

Fuentes

1. Fabric.js — loadSVGFromString — Valor de retorno de promesa y contrato del reviver de elemento original y objeto.
2. Fabric.js — Actualización a Fabric.js 6.0 — Importaciones con nombre y migración de callbacks a promesas.
3. Fabric.js — loadSVGFromURL — Análisis de URL y restricciones de obtención del mismo origen.
4. Fabric.js — API de Canvas — Exportación del estado del lienzo a marcado SVG.

Si lo que falta es geometría editable a partir de una ilustración raster, prepara un SVG candidato con PerfectVector. Comprueba primero las formas y después demuestra que tu editor de Fabric.js puede recolorear la parte prevista y exportar correctamente el resultado.