Import SVG Excalidraw : que peut-on modifier ?

Déposer un SVG dans Excalidraw peut te donner une image nette et redimensionnable sans rendre ses tracés individuels modifiables. Si tu dois recolorer ou déplacer une partie, il te faut une scène Excalidraw composée d’éléments natifs. Un convertisseur SVG vers Excalidraw peut créer ces éléments, mais le résultat nécessite toujours une vérification visuelle. La discussion Excalidraw sur l’import SVG décrit précisément ce problème d’objet unique par opposition à des parties modifiables.

Nous avons testé une petite icône bicolore avec un trou transparent. Un convertisseur fixé à une version précise a produit trois éléments Excalidraw sélectionnables, mais il a rempli le trou qui était transparent dans le SVG. C’est un rappel utile : modifiable et fidèle sont deux contrôles distincts.

Trois sens possibles d’un « SVG dans Excalidraw »

Le troisième cas fonctionne dans le sens inverse. Un outil peut insérer les données sources Excalidraw dans un export SVG afin que son propre dessin puisse être rouvert pour modification. L’extension Excalidraw pour VS Code, par exemple, documente des fichiers .excalidraw.svg avec des données de scène intégrées. Cela ne signifie pas qu’une illustration SVG quelconque contient déjà des formes Excalidraw.

Si tu ne peux pas dissocier un graphisme importé, identifie d’abord la structure de l’objet sélectionné. Notre guide de dissociation SVG distingue les objets image, les tracés composés et les véritables groupes ; Excalidraw ajoute son propre format de scène à cette question de structure du fichier source.

Si tu dois seulement modifier les tracés du SVG, suis les contrôles de traçage ou d’importation dans Boxy SVG et conserve un original SVG. Convertis vers une scène Excalidraw lorsque tu as besoin d’éléments de scène natifs.

Un petit test de conversion : les formes ont survécu, pas le trou

Notre source était un SVG écrit à la main : un anneau bleu-vert réalisé avec un tracé composé pair-impair, plus un cercle doré. Le milieu de l’anneau était réellement transparent dans l’original, et non peint en blanc. Nous l’avons converti avec le dépôt officiel svg-to-excalidraw en utilisant le paquet npm version 0.0.2, enregistré la scène renvoyée dans un fichier .excalidraw, ouvert ce fichier dans Excalidraw et exporté un PNG transparent pour comparaison.

Source originale et scène convertie

La conversion n’a signalé aucune erreur et a créé trois éléments natifs : deux éléments de dessin bleu-vert et une ellipse dorée. L’accent doré était sélectionnable séparément. Le centre transparent a toutefois échoué au contrôle d’apparence. Dans le rendu original, son pixel central était transparent ; dans l’export PNG transparent d’Excalidraw, le pixel correspondant était bleu-vert opaque. Une réponse de conversion sans erreur ne garantissait pas une image fidèle à l’original.

Il s’agit d’un test volontairement limité, et non d’une affirmation concernant tous les SVG ou toutes les méthodes de conversion. L’expérience distincte SVG Chop considère elle aussi les structures SVG complexes comme une difficulté de conversion. Un rapide coup d’œil au nombre d’objets ne suffit pas. Trous, masques, découpages, dégradés, texte et groupes imbriqués méritent leurs propres tests lorsque ton dessin les utilise.

Comment vérifier ton propre SVG

1. Conserve le SVG original. Enregistre une copie avant l’importation ou la conversion. Vérifie si la région que tu veux modifier est déjà un tracé ou une forme distincte. Un tracé composé unique peut comporter un trou sans posséder de parties sélectionnables séparément.
2. Détermine ce que « modifiable » signifie pour ce dessin. Si tu dois seulement redimensionner et positionner l’illustration, une image peut suffire. Si tu dois déplacer ou recolorer une partie, celle-ci doit exister sous forme d’élément natif de scène.
3. Essaie la conversion sur une copie. Le projet open source SVG vers Excalidraw convertit la géométrie SVG en contenu de scène Excalidraw. Vérifie sa configuration actuelle et note la version du paquet que tu utilises. Importe ou ouvre la scène obtenue au lieu de supposer qu’un placement d’image ordinaire exposera les tracés.
4. Compte et sélectionne les parties. Peux-tu sélectionner l’accent sans le corps ? Peux-tu le recolorer sans modifier l’autre couleur ? Rouvre la scène enregistrée et répète la modification.
5. Compare l’image, pas seulement les objets. Place l’original et l’export Excalidraw sur des fonds contrastés. Inspecte les trous, chevauchements, bords, textes et effets dont tu dépends. Notre test aurait réussi une vérification « trois éléments », mais aurait échoué ici.

Si la conversion divise une partie voulue en de nombreux éléments de dessin, les grouper peut faciliter leur déplacement, sans rétablir la structure originale du tracé. Si un trou disparaît, révise la source ou utilise un autre éditeur pour ce dessin. Conserve l’original modifiable dans l’éditeur vectoriel lorsqu’Excalidraw ne peut pas préserver une fonctionnalité nécessaire.

Où intervient PerfectVector

PerfectVector intervient plus tôt dans la méthode uniquement lorsque la source est un dessin matriciel, par exemple une icône PNG aplatie sans tracés SVG. Convertis le clipart en SVG, vérifie si les zones colorées et les espaces négatifs ont été préservés, puis nettoie la géométrie avant de tenter une conversion Excalidraw. Le guide de préparation des petites icônes couvre la clarté et la cohérence de la source. La vectorisation ne peut pas transformer à elle seule un placement d’image Excalidraw en éléments natifs de scène, et un SVG nouvellement tracé nécessite toujours le contrôle dans l’application de destination décrit ci-dessus.

Pour un SVG qui contient déjà des formes vectorielles adaptées, évite de le tracer à nouveau. Compare plutôt l’original à la scène convertie. Le guide des formes SVG personnalisées draw.io fait une distinction similaire entre image et forme native dans un autre éditeur de diagrammes.

FAQ

Puis-je dissocier une image SVG placée en formes Excalidraw ? Une sélection au niveau de l’image n’expose pas les parties SVG originales comme éléments natifs Excalidraw. Utilise une méthode de conversion lorsque tu as besoin de formes de scène distinctes, puis inspecte le résultat.

La conversion SVG vers Excalidraw préserve-t-elle tous les trous ? Ne le suppose pas. Dans notre test avec la version 0.0.2, un anneau pair-impair est devenu des éléments de dessin modifiables, mais son centre transparent s’est rempli. Compare ta source et ta scène enregistrée, particulièrement lorsque l’espace vide compte.

Dois-je vectoriser un SVG avant de l’importer ? Non. Si le SVG possède déjà les formes nécessaires, vérifie sa structure et sa conversion Excalidraw. La vectorisation est pertinente lorsque ton image de départ est matricielle, comme un PNG ou un JPG.

Sources

1. Discussion Excalidraw #6082 — Question d’un utilisateur concernant un SVG importé se comportant comme un bloc unique plutôt que comme des parties modifiables.
2. Excalidraw — svg-to-excalidraw — Méthode officielle open source utilisée pour le test d’icône originale avec une version fixée.
3. Extension Excalidraw Editor pour VS Code — Documente les fichiers de scène Excalidraw et les exports SVG/PNG avec données de scène intégrées.
4. Minixcali — SVG Chop — Expérience indépendante de conversion de parties SVG en éléments Excalidraw, avec réserves concernant la géométrie.

Si ton point de départ est une icône PNG, crée un SVG candidat avec PerfectVector, vérifie ses régions distinctes et ses trous, puis teste la scène Excalidraw enregistrée avant de l’utiliser dans un dessin.