Import SVG Konva : image ou tracés modifiables

Utilise Konva.Image pour placer un SVG complet sur un canevas. Utilise des nœuds Konva.Path distincts lorsque ton application doit recolorer ou manipuler des formes de tracé individuelles. Charger une image SVG ne crée pas automatiquement un objet Konva pour chaque élément qu’elle contient. Le guide SVG de Konva présente ces approches comme différentes.

Pour un sélecteur de logos ou un outil de composition, une image unique peut suffire. Pour un badge bicolore dont les régions nécessitent des contrôles distincts, la structure des objets compte. Détermine ce que l’utilisateur doit modifier avant de choisir le chargeur, et conserve la source SVG à côté de la scène du canevas.

Choisis la représentation avant d’importer

Le tutoriel Path de Konva accepte les données de tracé SVG via data. Il s’agit de la valeur de l’attribut d d’un tracé, et non du document SVG entier. Copier uniquement les valeurs d ne transmet ni la transformation du groupe parent, ni la couleur héritée, ni le comportement du viewBox SVG.

Une question distincte concerne aussi le fichier source : le SVG contient-il réellement des tracés ? Utilise le guide d’inspection des images matricielles intégrées lorsque le dessin est un bitmap enveloppé dans du SVG. Un SVG valide à base de tracés peut malgré tout devenir un nœud image unique dans Konva ; cela ne fait pas du fichier source un faux vecteur.

Un exemple bicolore avec un test visible du remplissage

Le symbole original ci-dessous contient deux tracés écrits à la main avec des remplissages explicites. Le canevas gauche les charge ensemble comme image unique. Le canevas droit construit deux nœuds Path à partir de la même géométrie. Les deux reçoivent une demande de remplissage rose et une échelle de 1.3.

Le rectangle rose à gauche fournit une preuve utile : imageNode.fill() change le fond de la forme image, tandis que les régions vertes et jaunes opaques gardent leurs couleurs sources. À droite, paths[0].fill() ne change que la première région. Ce test utilise une géométrie originale, et non un résultat de conversion PerfectVector.

Enregistre le code suivant dans un fichier HTML et sers-le via ton serveur de développement local. Il fixe Konva à 10.6.0, crée deux scènes de 320 × 240 et attend le décodage de l’image SVG avant de dessiner. Le code est la même comparaison que celle exécutée pour la capture.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

Dans cet exemple volontairement petit, chaque tracé possède sa propre peinture et utilise les mêmes coordonnées. Le groupe donne aux deux tracés modifiables une position et une échelle communes. Modifier l’échelle du groupe conserve les data de chaque tracé ; cela change leur emplacement et leur taille de dessin.

Pour un fichier SVG fiable existant qui nécessite seulement un placement d’image entière, le tutoriel Image montre la méthode habituelle de chargement. Charge l’URL SVG comme image, attends son chargement, puis transmets-la à Konva.Image. Un composant React qui rend du balisage SVG est une valeur différente de l’objet image attendu par le canevas.

Transfère plus que les données de tracé pour un dessin complexe

Le tableau parts de l’exemple est un modèle explicite pour deux formes connues. Ce n’est pas un importateur SVG. Avant d’utiliser une approche similaire sur un dessin exporté, inspecte ce qui crée son apparence :

• Une transformation de groupe peut déplacer, tourner ou redimensionner tous ses enfants. Préserve cette relation ou incorpore délibérément la transformation à la géométrie.
• La peinture peut provenir d’un ancêtre ou d’une règle CSS. Résous le remplissage et le contour voulus au lieu de supposer que chaque tracé les déclare.
• Dégradés, découpages, masques et filtres possèdent leurs propres définitions et références. Copier une chaîne d ne reconstruit pas ces effets.
• Le texte et les formes de base peuvent nécessiter un traitement distinct. Ne suppose pas que chaque objet visible soit déjà un tracé.

Garde un rendu de l’original à côté de ta reconstruction pendant les tests. Commence par une région reconnaissable, compare sa position et sa couleur, puis ajoute les formes restantes. Le guide de modification SVG couvre le nettoyage de la source lorsque la structure des objets est difficile à exploiter.

Si les contrôles individuels de tracés sont inutiles, charger le SVG complet comme image peut éviter cette reconstruction. Konva documente aussi le rendu SVG avec une bibliothèque externe comme canvg, puis le placement du canevas obtenu dans Konva.Image. Cela reste une représentation sous forme d’image ; l’utilisateur n’obtient pas des nœuds Konva distincts pour chaque tracé source. Consulte les possibilités documentées.

Pour un dessin qui nécessite seulement une autre couleur source, tu peux aussi modifier le SVG lui-même puis recharger son image. Le mainteneur Konva décrit cette méthode dans le ticket react-konva 530. Utilise une modification structurée adaptée à ton SVG connu, au lieu de remplacer indistinctement tous les remplissages et de perdre les différences de couleur volontaires.

Considère l’export du canevas comme une livraison matricielle

L’exemple appelle pathScene.stage.toDataURL({ pixelRatio: 2 }). Sa scène de 320 × 240 produit un PNG décodé de 640 × 480. Augmenter pixelRatio change les dimensions en pixels exportées ; cela ne transforme pas le PNG en SVG modifiable. La documentation d’export Konva explique ce réglage.

Garde ces trois livrables distincts :

1. Le SVG original, pour la modification vectorielle et la comparaison.
2. Les données de scène de ton application, comprenant les références de tracés ou d’images et les modifications prises en charge par ton application.
3. Un export PNG ou autre format matriciel, pour les usages nécessitant une image rendue.

Rouvre le PNG exporté et inspecte ses dimensions et ses petits détails. Teste aussi l’image SVG dans les navigateurs pris en charge par ton application ; le guide SVG de Konva signale des différences de compatibilité de rendu. Cet exemple teste un SVG simple et autonome : il ne démontre donc pas la prise en charge de tous les fichiers ou effets exportés.

Évite de juger la qualité vectorielle à partir du seul aperçu du canevas. Le guide des SVG pixellisés distingue la géométrie source des aperçus matriciels et des dimensions d’affichage.

Quand PerfectVector aide à préparer la source

Si ton fichier de départ est uniquement un motif PNG ou JPG, PerfectVector peut aider à reconstruire de la géométrie SVG modifiable avant la création de la scène Konva. Convertis l’image en vecteurs, ouvre le résultat dans un éditeur et inspecte la silhouette, les trous et les régions colorées avant d’intégrer les tracés à ton application.

La vectorisation ne crée ni modèle de scène Konva ni analyseur de documents SVG arbitraires. Tu dois toujours choisir la représentation et transmettre les propriétés nécessaires. Si tu possèdes déjà un original SVG utilisable, pars de ce fichier. Pour une photographie ou une texture peinte devant rester en pixels, un nœud image est souvent adapté sans traçage.

Vérifie l’import avec ton dessin

Avant d’ajouter un SVG à un éditeur réutilisable :

1. Choisis un nœud d’image entière ou des nœuds de formes distincts selon les contrôles nécessaires à l’utilisateur.
2. Change la couleur d’une région et confirme que seul l’objet voulu change.
3. Redimensionne tout le dessin et vérifie l’espacement, l’apparence des contours et le découpage.
4. Exporte aux dimensions en pixels requises et rouvre le fichier matriciel.
5. Rouvre indépendamment l’original SVG enregistré afin qu’un export de canevas ne devienne jamais ta seule copie.

FAQ

Konva.Image rend-il modifiables les tracés d’un SVG ? Non. Il affiche le SVG comme un nœud image unique. Pour contrôler des régions de tracé individuelles, crée des nœuds Path distincts à partir de données adaptées ou utilise une méthode de modification SVG qui préserve la structure du document.

Pourquoi fill ajoute-t-il un rectangle au lieu de recolorer mon SVG ? Sur un nœud Image, le remplissage peint la forme image derrière son contenu. Il ne réécrit pas les remplissages dans le SVG. Modifie le SVG source et recharge-le, ou utilise des nœuds Path distincts lorsque ton application nécessite des contrôles de couleur individuels.

Augmenter pixelRatio exporte-t-il un fichier vectoriel ? Non. Dans cet exemple, pixelRatio 2 produit un PNG dont la largeur et la hauteur sont le double de celles de la scène. Conserve la source SVG séparément pour la modification vectorielle.

Sources

1. Konva — SVG sur canevas — Explique les possibilités Image, Path et moteur externe, ainsi que les limites de compatibilité des navigateurs.
2. Konva — Tutoriel Path — Documente la création d’un Path à partir de données de tracé SVG et de propriétés de peinture explicites.
3. Konva — Tutoriel Image — Montre le chargement d’une image et son placement dans une scène Konva.
4. Konva — Export d’image haute qualité — Explique l’export matriciel et l’effet de pixelRatio sur les dimensions de sortie.
5. Konva — Ticket react-konva 530 — Consigne la méthode du mainteneur consistant à modifier la source et la recharger pour changer les couleurs d’une image SVG.

Tu pars d’une icône uniquement matricielle ? Transforme ton image en tracés SVG, inspecte les régions colorées reconstruites et teste une région dans Konva avant de connecter le reste de ton éditeur.