Formas SVG personalizadas en draw.io: ¿imágenes o plantillas?

Para una forma SVG personalizada en draw.io, decide qué necesitas cambiar después de insertarla. Una imagen SVG incrustada es útil cuando quieres la apariencia de la ilustración. Una plantilla XML nativa es el método para definir geometría de diagrama, estilos y puntos de conexión específicos. Una biblioteca personalizada puede almacenar cualquiera de los dos tipos de elemento para reutilizarlos.

Estas opciones resuelven problemas diferentes. Guardar un SVG en una biblioteca no convierte por sí solo sus trazados en una forma nativa de diagrama. La referencia de formas personalizadas de draw.io distingue las imágenes incrustadas de las formas definidas en su formato XML.

Si tus diagramas están escritos en Mermaid, utiliza el flujo de paquetes de iconos SVG personalizados para registrar la ilustración mientras mantienes etiquetas y conectores en el código del diagrama.

Elige el comportamiento antes de convertir la ilustración

Imagina un pequeño símbolo de dispositivo: un cuerpo rectangular con un indicador circular. Quieres reutilizarlo en unos cuantos diagramas de procesos.

En un diagrama de estilo presentación, quizá el dispositivo solo necesite verse consistente. En un diagrama de conexiones, puede que quieras unir líneas al punto medio de sus bordes izquierdo y derecho. Escribe ese requisito antes de preparar otro archivo.

Inserta un SVG cuando baste su apariencia

La guía oficial de inserción SVG documenta cómo arrastrar un archivo SVG desde tu ordenador al lienzo. También puedes utilizar Arrange → Insert → Image. Elige Actual Size cuando se solicite y después redimensiona la ilustración insertada según necesites.

Para el ejemplo del dispositivo, utiliza una copia de trabajo y comprueba el pequeño indicador circular después de redimensionarlo. Una forma que se lee claramente a tamaño completo puede perder su detalle útil en un diagrama compacto.

Conserva por separado el original editable de la ilustración. Si necesitas mover el círculo dentro del dispositivo, haz ese cambio en el editor original y sustituye la imagen de entrega. No dediques tiempo a buscar un comando Ungroup solo porque el SVG tenga varias partes visibles. Nuestra guía de objetos SVG y desagrupación explica cómo la estructura del archivo afecta a esa expectativa.

Un dibujo SVG ordinario de un diagrama completo también requiere cuidado. La guía de inserción de draw.io explica que un SVG ordinario no lleva la información de conectores necesaria para reconstruir un diagrama editable. Conserva el archivo original del diagrama cuando lo tengas.

Recolorear un SVG incrustado tiene sus propios requisitos

Draw.io proporciona una conexión limitada entre la ilustración SVG incrustada y sus controles de color. La guía de colores de SVG incrustado utiliza reglas CSS dentro del SVG y un ajuste editableCssRules en el estilo del objeto insertado. Esta función se aplica a imágenes incrustadas, no a imágenes incluidas mediante un enlace.

Para un SVG ya estructurado con reglas CSS, selecciona la imagen insertada, elige Edit Style y añade:

editableCssRules=.*;

El patrón documentado selecciona todas las reglas aplicables. Corresponde al estilo del objeto de draw.io, no a una línea pegada en el marcado de dibujo del SVG.

Inspecciona los controles resultantes antes de construir una biblioteca alrededor de ellos. Si no aparecen controles de color útiles, compara el original con el ejemplo de clases CSS de la guía oficial. No supongas que el ajuste reorganizará atributos arbitrarios de pintura SVG, separará el indicador del dispositivo o creará puntos de conexión.

Para una ilustración que solo necesite un cambio permanente de color, editar el SVG original puede ser más sencillo. Guarda una copia y verifica de nuevo la apariencia importada.

Utiliza una plantilla nativa para una forma definida deliberadamente

Una plantilla nativa describe la forma en la sintaxis XML propia de draw.io. No es el archivo SVG renombrado a .xml. El tutorial de formas personalizadas utiliza Arrange → Insert → Shape para abrir el editor de formas y Preview para inspeccionar la definición.

Aquí tienes un pequeño punto de partida original para el símbolo de dispositivo:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

El rectángulo exterior y el círculo central son intencionadamente sencillos. Los valores de coordenadas definen el espacio de dibujo de esta ilustración; no son medidas físicas del dispositivo.

La referencia XML especifica coordenadas relativas de conexión. Con perimeter="0", estas dos restricciones colocan puntos en los puntos medios izquierdo y derecho. También exige que la operación de pintura de la geometría del fondo esté al principio del primer plano, por eso aparece ahí fillstroke.

Previsualiza la forma, añádela a un diagrama de prueba y prueba el comportamiento que realmente necesitas:

1. Cambia su color de relleno y de línea.
2. Une un conector a cada punto medio previsto.
3. Mueve el dispositivo e inspecciona ambas uniones.
4. Redimensiónalo y comprueba el círculo, el contorno y las posiciones de conectores.

Es una pequeña definición para adaptar, no un conversor general de SVG a plantillas. Si tu dispositivo ilustrado incluye muchos detalles decorativos, decide cuáles corresponden al símbolo del diagrama. Redibujar unas pocas primitivas esenciales puede ser más fácil de mantener que llevar cada contorno a una plantilla.

Guarda una biblioteca después de que el elemento supere sus comprobaciones

Una biblioteca es el paso de reutilización. La guía de bibliotecas personalizadas documenta File → New Library, la elección de una ubicación de almacenamiento y cómo añadir imágenes o arrastrar formas desde el lienzo. Las bibliotecas personalizadas utilizan la extensión .xml.

Guarda el dispositivo con un nombre que indique qué contiene, como «Ilustración de dispositivo» o «Dispositivo con dos puertos». Consérvalos como entradas separadas si ambos son útiles.

Después abre un diagrama nuevo e inserta el elemento guardado. Repite una edición significativa: recolorea la ilustración si se configuró o une un conector a la plantilla nativa. Esto detecta una biblioteca que contiene una versión anterior de tu símbolo.

Un nombre de archivo .xml por sí solo no dice si el elemento es geometría nativa. Tanto una biblioteca como una definición de plantilla implican XML, pero una biblioteca puede contener imágenes, grupos, formas personalizadas o diagramas enteros. Inspecciona el comportamiento del elemento insertado.

Recupera una ilustración raster solo cuando necesites un maestro vectorial

Si la ilustración original del dispositivo solo se conserva como PNG o escaneo, el flujo de clipart a SVG de PerfectVector puede ayudar a preparar una ilustración candidata. Recorta una copia hasta el motivo, previsualiza el resultado vectorial e inspecciona el contorno exterior, el detalle circular, los espacios vacíos y el fondo no deseado. Descarga el SVG y pruébalo mediante el método de inserción de imágenes.

Eso te da un original centrado en la apariencia que puedes revisar. No define los puertos izquierdo y derecho del dispositivo, el significado de los conectores ni el XML de plantilla nativa. Créalos deliberadamente si el diagrama los requiere.

Un símbolo muy sencillo de rectángulo y círculo puede ser más rápido de dibujar directamente. Vectorizar resulta más útil cuando la ilustración conservada contiene curvas distintivas que quieras mantener. Para motivos dibujados a mano, la guía de preparación de ilustraciones de mapas trata la limpieza del dibujo antes de vectorizar.

Si el SVG sigue mostrando bloques al ampliarlo, comprueba si contiene un mapa de bits incrustado con el diagnóstico de imágenes raster en SVG. La introducción a la vectorización de imágenes explica la diferencia general entre conservar píxeles y recuperar formas.

Preguntas frecuentes

¿Importar un SVG lo convierte en una plantilla nativa de draw.io? No. El flujo de inserción de imágenes incrusta la ilustración. Una plantilla nativa personalizada utiliza la definición XML de formas de draw.io para geometría, estilos y puntos de conexión.

¿Puedo cambiar colores en un SVG incrustado? Draw.io documenta la edición de colores mediante reglas CSS SVG adecuadas y el ajuste editableCssRules en el estilo del objeto insertado. Comprueba la estructura del original y los controles que aparecen tras insertar.

¿Una biblioteca personalizada convierte trazados SVG en formas nativas? Una biblioteca almacena elementos reutilizables, incluidas imágenes y formas nativas personalizadas. Guardar una imagen en una biblioteca no añade por sí mismo geometría nativa ni semántica de conectores.

¿Vectorizar un PNG creará puntos de conexión para mi diagrama? No. Vectorizar puede recuperar contornos de ilustración. Define por separado los puntos de conexión y el comportamiento nativo del diagrama cuando se requieran.

Fuentes

1. draw.io — Insertar imágenes SVG en un diagrama — Inserción de imágenes, tamaño y límite de reconstrucción de conectores de diagrama desde SVG.
2. draw.io — Crear y editar formas personalizadas complejas — Geometría XML nativa, restricciones de conexión y operaciones de dibujo.
3. draw.io — Editar colores en imágenes SVG incrustadas — Edición de reglas CSS y requisitos de imágenes incrustadas frente a enlazadas.
4. draw.io — Crear formas personalizadas — Editor de plantillas, flujo de vista previa y estilos predeterminados.
5. draw.io — Trabajar con bibliotecas de formas personalizadas — Crear, guardar y reutilizar elementos mixtos de biblioteca.

Elige el comportamiento que necesitas, prepara un símbolo de dispositivo y pruébalo en un diagrama nuevo. Si solo queda una ilustración raster, prepara un SVG candidato, inspecciona sus contornos y comprueba la imagen insertada antes de guardarla en tu biblioteca.