Importación SVG en Excalidraw: ¿qué se vuelve editable?

Arrastrar un SVG a Excalidraw puede darte una imagen nítida y redimensionable sin permitirte editar sus trazados individuales. Si necesitas cambiar el color o mover una parte, necesitas una escena de Excalidraw formada por elementos nativos. Un conversor de SVG a Excalidraw puede crear esos elementos, pero el resultado sigue necesitando una comprobación visual. La discusión de Excalidraw sobre importación SVG describe precisamente este problema de objeto único frente a partes editables.

Probamos un icono pequeño de dos colores con un hueco transparente. Una versión fijada del conversor produjo tres elementos de Excalidraw seleccionables, pero rellenó el hueco que se veía claramente en el SVG. Es un recordatorio útil: editable y fiel al original son comprobaciones independientes.

Tres significados posibles de «un SVG en Excalidraw»

El tercer caso va en sentido contrario. Una herramienta puede incluir datos fuente de Excalidraw dentro de una exportación SVG para que su propio dibujo pueda reabrirse y editarse. La extensión de Excalidraw para VS Code, por ejemplo, documenta archivos .excalidraw.svg con datos de escena incrustados. Eso no significa que una ilustración SVG cualquiera ya contenga figuras de Excalidraw.

Si un gráfico importado no se desagrupa, identifica primero la estructura del objeto seleccionado. Nuestra guía para desagrupar SVG distingue objetos de imagen, trazados compuestos y grupos reales; Excalidraw añade su propio formato de escena a esa cuestión sobre el archivo fuente.

Si solo necesitas editar los trazados del SVG, sigue las comprobaciones de trazado o importación de Boxy SVG y conserva un maestro SVG. Convierte a una escena de Excalidraw cuando necesites elementos nativos de escena.

Una pequeña prueba de conversión: las figuras se conservaron, el hueco no

Nuestra fuente era un SVG escrito a mano: un anillo verde azulado formado por un trazado compuesto con regla even-odd, más un círculo dorado. El centro del anillo era realmente transparente en el original, no blanco. Lo procesamos con el repositorio oficial svg-to-excalidraw usando la versión 0.0.2 del paquete npm, guardamos la escena devuelta como archivo .excalidraw, lo abrimos en Excalidraw y exportamos un PNG transparente para comparar.

Fuente original frente a escena convertida

La conversión no informó de errores y creó tres elementos nativos: dos elementos de dibujo verde azulado y una elipse dorada. El detalle dorado se podía seleccionar por separado. Sin embargo, el centro transparente falló la comprobación de apariencia. En el renderizado original, su píxel central era transparente; en la exportación PNG transparente de Excalidraw, el píxel correspondiente era verde azulado opaco. Una respuesta de conversión sin errores no garantizó una imagen equivalente.

Es una prueba deliberadamente limitada, no una afirmación sobre todos los SVG ni todos los métodos de conversión. El experimento independiente SVG Chop también considera las estructuras SVG complejas un reto de conversión. Un vistazo a la cantidad de objetos no basta. Los huecos, las máscaras, los recortes, los degradados, el texto y los grupos anidados merecen pruebas específicas cuando tu diseño los usa.

Cómo comprobar tu propio SVG

1. Conserva el SVG original. Guarda una copia antes de importar o convertir. Inspecciona si la región que quieres cambiar ya es un trazado o figura independiente. Un único trazado compuesto puede tener un hueco sin contener piezas seleccionables por separado.
2. Decide qué significa «editable» para este dibujo. Si solo necesitas escalar y posicionar la ilustración, una imagen puede bastar. Si necesitas mover o cambiar el color de una pieza, esa pieza debe existir como elemento nativo de escena.
3. Prueba la conversión con una copia. El proyecto de código abierto SVG-to-Excalidraw convierte geometría SVG en contenido de escena de Excalidraw. Comprueba su configuración actual y registra la versión del paquete que uses. Importa o abre la escena resultante en lugar de asumir que colocar una imagen normal mostrará sus trazados.
4. Cuenta y selecciona las piezas. ¿Puedes seleccionar el detalle sin el cuerpo? ¿Puedes cambiar su color mientras el otro permanece igual? Abre de nuevo la escena guardada y repite la edición.
5. Compara la imagen, no solo los objetos. Coloca el original y la exportación de Excalidraw sobre fondos de contraste. Inspecciona huecos, solapamientos, bordes, texto y los efectos de los que dependes. Nuestra prueba habría superado una comprobación de «tres elementos», pero falló aquí.

Si la conversión divide una parte prevista en muchos elementos de dibujo, agruparlos facilita moverlos, pero no restaura la estructura del trazado original. Si desaparece un hueco, modifica la fuente o usa otro editor para ese dibujo. Conserva el maestro editable en el editor vectorial cuando Excalidraw no pueda preservar una función que necesitas.

Dónde encaja PerfectVector

PerfectVector ayuda antes en el proceso solo cuando la fuente es un dibujo rasterizado, como un icono PNG plano que aún no tiene trazados SVG. Convierte el clipart a SVG, inspecciona si se conservaron las regiones de color y los espacios negativos, y limpia la geometría antes de intentar convertir a Excalidraw. La guía de preparación de iconos pequeños explica la claridad y coherencia de las fuentes. La vectorización no convierte por sí sola una imagen colocada en Excalidraw en elementos nativos de escena, y un SVG recién trazado sigue necesitando la comprobación de la aplicación de destino indicada arriba.

Si el SVG ya contiene figuras vectoriales adecuadas, omite la vectorización. Compara el original con la escena convertida. La guía de figuras SVG personalizadas de draw.io distingue de forma similar entre imagen y figura nativa en otro editor de diagramas.

Preguntas frecuentes

¿Puedo desagrupar una imagen SVG colocada para obtener figuras de Excalidraw? Una selección de imagen no expone las partes originales del SVG como elementos nativos de Excalidraw. Usa un flujo de conversión cuando necesites figuras de escena separadas y después inspecciona el resultado.

¿La conversión de SVG a Excalidraw conserva todos los huecos? No lo des por hecho. En nuestra prueba con la versión 0.0.2, un anillo even-odd se convirtió en elementos de dibujo editables, pero su centro transparente quedó relleno. Compara tu propia fuente con la escena guardada, especialmente donde importe el espacio vacío.

¿Debo vectorizar un SVG antes de importarlo? No. Si el SVG ya tiene las figuras que necesitas, comprueba su estructura y la conversión a Excalidraw. La vectorización es pertinente cuando la imagen inicial es rasterizada, como PNG o JPG.

Fuentes

1. Discusión de Excalidraw #6082 — Pregunta de un usuario sobre un SVG importado que se comporta como un bloque en vez de como partes editables.
2. Excalidraw — svg-to-excalidraw — Método oficial de conversión de código abierto usado con una versión fijada para la prueba del icono original.
3. Extensión Excalidraw Editor para VS Code — Documenta archivos de escena de Excalidraw y exportaciones SVG/PNG con datos de escena incrustados.
4. Minixcali — SVG Chop — Experimento independiente que convierte partes SVG en elementos de Excalidraw, con salvedades sobre la geometría.

Si partes de un icono PNG, crea un SVG candidato con PerfectVector, comprueba sus regiones y huecos separados y después prueba la escena de Excalidraw guardada antes de usarla en un dibujo.