Formes SVG draw.io personnalisées : images ou pochoirs ?

Pour une forme SVG personnalisée dans draw.io, décide ce que tu dois modifier après insertion. Une image SVG intégrée est utile lorsque tu veux l’apparence du dessin. Un pochoir XML natif permet de définir géométrie de diagramme, styles et points de connexion précis. Une bibliothèque personnalisée peut stocker les deux types pour les réutiliser.

Ces choix résolvent des problèmes différents. Enregistrer un SVG dans une bibliothèque ne transforme pas à lui seul ses tracés en forme native de diagramme. La référence des formes personnalisées draw.io distingue les images intégrées des formes définies dans son format XML.

Si tes diagrammes sont écrits en Mermaid, utilise la procédure de jeu d’icônes SVG personnalisé pour enregistrer le dessin tout en gardant libellés et connecteurs dans la source du diagramme.

Choisir le comportement avant de convertir le dessin

Imagine un petit symbole d’appareil : un corps rectangulaire avec un indicateur circulaire. Tu veux le réutiliser dans quelques diagrammes de processus.

Dans un diagramme de présentation, l’appareil peut seulement devoir avoir une apparence cohérente. Dans un diagramme de connexions, tu peux vouloir attacher les lignes au milieu de ses bords gauche et droit. Note cette exigence avant de préparer un autre fichier.

Insérer un SVG lorsque son apparence suffit

Le guide officiel d’insertion SVG décrit le glisser-déposer d’un fichier SVG depuis l’ordinateur vers le canevas. Tu peux aussi utiliser Arrange → Insert → Image. Choisis Actual Size lorsque demandé, puis redimensionne le dessin inséré au besoin.

Pour l’exemple d’appareil, utilise une copie de travail et vérifie le petit indicateur circulaire après redimensionnement. Une forme claire à pleine taille peut perdre ses détails utiles dans un diagramme compact.

Garde séparément la source éditable du dessin. Si tu dois déplacer le cercle dans l’appareil, fais le changement dans l’éditeur source et remplace l’image livrée. Ne perds pas de temps à chercher une commande Ungroup simplement parce que le SVG contient plusieurs parties visibles. Notre guide des objets et de la dissociation SVG explique comment la structure du fichier influe sur cette attente.

Un dessin SVG ordinaire d’un diagramme entier demande aussi de la prudence. Le guide d’insertion draw.io explique qu’un SVG ordinaire ne porte pas les informations de connecteurs nécessaires à la reconstruction d’un diagramme éditable. Garde le fichier de diagramme original si tu l’as.

Recolorer un SVG intégré a ses propres exigences

Draw.io propose un lien limité entre le dessin SVG intégré et ses commandes de couleur. Le guide des couleurs de SVG intégrés utilise des règles CSS dans le SVG et un réglage editableCssRules dans le style de l’objet inséré. Cette fonctionnalité concerne les images intégrées, pas les images ajoutées par lien.

Pour un SVG déjà structuré avec des règles CSS, sélectionne l’image insérée, choisis Edit Style et ajoute :

editableCssRules=.*;

Le motif documenté sélectionne toutes les règles admissibles. Il appartient au style de l’objet draw.io, pas à une ligne collée dans le balisage graphique SVG.

Examine les commandes obtenues avant de bâtir une bibliothèque autour. Si aucune commande de couleur utile n’apparaît, compare la source à l’exemple de classes CSS du guide officiel. Ne suppose pas que le réglage réorganisera des attributs de couleur SVG quelconques, séparera l’indicateur de l’appareil ou créera des points de connexion.

Pour un dessin nécessitant seulement un changement de couleur permanent, modifier la source SVG peut être plus simple. Enregistre une copie et vérifie à nouveau l’apparence importée.

Utiliser un pochoir natif pour une forme définie délibérément

Un pochoir natif décrit la forme dans la syntaxe XML propre à draw.io. Ce n’est pas le fichier SVG renommé en .xml. Le tutoriel des formes personnalisées utilise Arrange → Insert → Shape pour ouvrir l’éditeur de formes et Preview pour examiner la définition.

Voici un petit point de départ original pour le symbole d’appareil :

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

Le rectangle extérieur et le cercle central sont volontairement simples. Les valeurs de coordonnées définissent l’espace de dessin de cette illustration ; ce ne sont pas des mesures physiques d’appareil.

La référence XML définit des coordonnées de connexion relatives. Avec perimeter="0", ces deux contraintes placent des points aux milieux des bords gauche et droit. Elle exige aussi que l’opération de rendu de la géométrie de fond se trouve au début du premier plan, d’où la présence de fillstroke à cet endroit.

Affiche l’aperçu, ajoute la forme à un diagramme de test et essaie le comportement réellement nécessaire :

1. Change la couleur de remplissage et du contour.
2. Attache un connecteur à chaque milieu prévu.
3. Déplace l’appareil et examine les deux attaches.
4. Redimensionne-le et vérifie cercle, contour et positions des connecteurs.

C’est une petite définition à adapter, pas un convertisseur général SVG vers pochoir. Si ton appareil illustré comporte de nombreux détails décoratifs, décide lesquels appartiennent au symbole de diagramme. Redessiner quelques primitives essentielles peut être plus facile à maintenir que transférer chaque contour dans un pochoir.

Enregistrer une bibliothèque après les vérifications

Une bibliothèque est l’étape de réutilisation. Le guide des bibliothèques personnalisées décrit File → New Library, le choix d’un emplacement de stockage et l’ajout d’images ou le glisser-déposer de formes depuis le canevas. Les bibliothèques personnalisées utilisent l’extension .xml.

Enregistre l’appareil sous un nom qui indique son contenu, comme « Dessin d’appareil » ou « Appareil à deux ports ». Garde des entrées distinctes si les deux sont utiles.

Ouvre ensuite un nouveau diagramme et insère l’élément enregistré. Répète une modification significative : recolore le dessin si cela a été configuré, ou attache un connecteur au pochoir natif. Cela détecte une bibliothèque contenant une ancienne version du symbole.

Un nom de fichier .xml seul ne dit pas si l’élément est une géométrie native. Une bibliothèque et une définition de pochoir impliquent du XML, mais une bibliothèque peut contenir images, groupes, formes personnalisées ou diagrammes entiers. Examine le comportement de l’élément inséré.

Reconstruire le dessin matriciel seulement si tu as besoin d’un original vectoriel

Si l’illustration originale d’appareil n’existe plus qu’en PNG ou scan, la procédure clipart vers SVG de PerfectVector peut aider à préparer un dessin candidat. Recadre une copie sur le motif, affiche le résultat vectoriel et examine contour extérieur, détail circulaire, espaces vides et fond indésirable. Télécharge le SVG et essaie-le via l’insertion d’image.

Cela donne une source centrée sur l’apparence à examiner. Cela ne définit pas les ports gauche et droit, le sens des connecteurs ou le XML de pochoir natif. Crée-les volontairement si le diagramme les exige.

Un symbole très simple composé d’un rectangle et d’un cercle peut être plus rapide à dessiner directement. La vectorisation est plus utile lorsqu’une illustration restante contient des courbes distinctives à garder. Pour les motifs dessinés à la main, le guide de préparation des illustrations de cartes traite du nettoyage du dessin avant vectorisation.

Si le SVG devient encore pixellisé en agrandissement, cherche une image matricielle intégrée avec le diagnostic des images matricielles SVG. La présentation de la vectorisation d’images explique la différence plus large entre conserver les pixels et reconstruire les formes.

FAQ

Importer un SVG en fait-il un pochoir draw.io natif ? Non. La procédure d’insertion d’image intègre le dessin. Un pochoir personnalisé natif utilise la définition de forme XML draw.io pour la géométrie, les styles et les points de connexion.

Puis-je changer les couleurs d’un SVG intégré ? Draw.io décrit l’édition des couleurs via des règles CSS SVG adaptées et le réglage editableCssRules dans le style de l’objet inséré. Vérifie la structure source et les commandes exposées après insertion.

Une bibliothèque personnalisée convertit-elle les tracés SVG en formes natives ? Une bibliothèque stocke des éléments réutilisables, dont images et formes personnalisées natives. Enregistrer une image dans une bibliothèque n’ajoute pas à lui seul de géométrie native ni de sens aux connecteurs.

Vectoriser un PNG crée-t-il des points de connexion pour mon diagramme ? Non. La vectorisation peut reconstruire les contours du dessin. Définis séparément les points de connexion et le comportement natif du diagramme lorsqu’ils sont nécessaires.

Sources

1. draw.io — Insérer des images SVG dans un diagramme — Insertion d’image, dimensions et limites de reconstruction des connecteurs depuis un SVG.
2. draw.io — Créer et modifier des formes personnalisées complexes — Géométrie XML native, contraintes de connexion et opérations de dessin.
3. draw.io — Modifier les couleurs des images SVG intégrées — Édition des règles CSS et exigences des images intégrées ou liées.
4. draw.io — Créer des formes personnalisées — Éditeur de pochoirs, aperçu et styles par défaut.
5. draw.io — Utiliser les bibliothèques de formes personnalisées — Création, enregistrement et réutilisation d’éléments mixtes en bibliothèque.

Choisis le comportement nécessaire, prépare un symbole d’appareil et teste-le dans un nouveau diagramme. S’il ne reste qu’un dessin matriciel, prépare un SVG candidat, examine ses contours et vérifie l’image insérée avant de l’enregistrer dans ta bibliothèque.