Comment savoir si un SVG contient une image matricielle

Oui, un SVG peut contenir une image matricielle. Il peut réunir tracés vectoriels et pixels dans le même document ou être une simple enveloppe autour d’un PNG ou JPEG. L’extension .svg indique le format du conteneur, pas si chaque partie visible est vectorielle.

La vérification fiable consiste à examiner les objets et le code source du fichier. Le zoom aide à remarquer un problème, mais ne permet pas de savoir si l’application rastérise son aperçu ou si les pixels sont réellement stockés dans le SVG.

Pour une application WPF, le guide des représentations SVG dans WPF distingue la source SVG des objets de dessin natifs et des livrables bitmap. Vérifie ce que l’application reçoit avant de considérer un affichage rastérisé comme une preuve sur le fichier original.

Ce qu’un SVG peut contenir

SVG est un format graphique fondé sur XML et son modèle de contenu dépasse les seuls tracés. La spécification du contenu intégré de SVG 2 définit un élément <image> plaçant un fichier référencé complet dans un rectangle. Ce fichier peut être un PNG, JPEG ou autre SVG.

Cela donne quatre structures courantes :

Un contenu mixte n’est pas automatiquement incorrect. Une carte peut utiliser des tracés pour les étiquettes et limites tout en gardant une couche satellite ombrée en matriciel. Un graphisme de produit peut placer un badge modifiable sur une photo. Le problème commence lorsqu’une conversion devait produire des tracés modifiables et fournit des pixels dans un autre conteneur.

Vérification 1 : examine les objets

Ouvre le SVG dans Illustrator, Inkscape, Affinity Designer ou un autre éditeur avec un panneau Objects ou Layers. Sélectionne la zone que tu soupçonnes d’être matricielle.

• Un seul objet rectangulaire identifié comme image est une preuve forte de contenu image.
• Des nœuds visibles sur les bords réels du dessin indiquent une géométrie vectorielle.
• Un tracé d’écrêtage peut cacher une image rectangulaire : développe l’arborescence des calques ou objets avant de décider.
• Des tracés ailleurs ne prouvent pas que tout le document est vectoriel. Un fichier peut contenir les deux.

Cette vérification aide les designers qui ne veulent pas lire le XML, mais a une limite : un objet <image> rectangulaire peut référencer un autre SVG. L’examen de la source indique ce que l’objet charge réellement.

Vérification 2 : examine le code source SVG

Fais une copie, puis ouvre le fichier .svg dans un éditeur de texte brut. Cherche <image. Sans élément image, le mécanisme courant d’image intégrée est absent. Si tu en trouves un, lis sa valeur href.

Un PNG intégré commence souvent ainsi :

<image href="data:image/png;base64,iVBORw0KGgo..." />

Un JPEG intégré commence généralement par data:image/jpeg;base64,. La référence des URL data de MDN explique que les données sont placées directement dans l’URL, avec un encodage Base64 facultatif. Une très longue suite illisible est normale pour cette forme.

Une image matricielle liée ressemble plutôt à ceci :

<image href="photos/product-shot.png" />

Ce PNG n’est pas stocké dans le SVG. Le document dépend d’un fichier distinct à cet emplacement. Déplace ou envoie le SVG sans l’image et le dessin peut disparaître.

Enfin, ceci ne prouve pas un contenu matriciel :

<image href="icons/mark.svg" />

La référence <image> de MDN indique explicitement que l’élément peut afficher des formats matriciels ou un autre SVG. Vérifie le type de média ou l’extension avant de le classer.

Trois structures dans un SVG ou à côté

L’intégration et la liaison posent des problèmes différents

Lors de l’importation d’une image, Inkscape peut la lier ou l’intégrer. Son guide d’importation d’images décrit clairement le compromis : la liaison garde le SVG plus petit mais le rend dépendant de l’emplacement de l’image ; l’intégration rend le SVG autonome mais augmente sa taille.

Cette différence compte lors de la transmission :

• Image matricielle intégrée : transportable en un fichier, mais toujours limitée par sa résolution et souvent beaucoup plus lourde que prévu.
• Image matricielle liée : plus facile à mettre à jour séparément, mais fragile lors des déplacements entre dossiers, ordinateurs, sites ou fournisseurs.
• Tracés vectoriels : modifiables comme géométrie, mais seulement si la source a d’abord été vectorisée ou dessinée en tracés.

L’intégration est un conditionnement, pas une vectorisation. Base64 ne transforme pas les pixels en courbes. Si tu prépares du contenu pour une banque d’images, suis l’examen des soumissions vectorielles Adobe Stock pour les vérifications supplémentaires de plan de travail, de modification et de source.

Pourquoi le zoom ne suffit pas

Si la zone suspecte laisse apparaître des blocs de pixels à fort zoom dans plusieurs visualiseurs, elle est probablement matricielle. Toutefois, un visualiseur peut rastériser un SVG sain pour une miniature, un canevas, un aperçu d’impression ou un cache d’importation. À l’inverse, un PNG intégré haute résolution peut paraître lisse à un zoom ordinaire et passer inaperçu.

Utilise le zoom comme examen du symptôme, puis confirme avec les objets ou la source. Le guide sur pourquoi un SVG semble pixellisé distingue le contenu intégré du comportement du visualiseur et du rendu des petites icônes. Pour une application canvas, compare les imports d’images et de tracés modifiables dans Konva avant d’interpréter un seul nœud image comme un problème de la source SVG.

Décide de conserver, relier ou remplacer le contenu

Conserve le matriciel lorsque les pixels sont intentionnels

Les photos, scans, textures, éclairages doux et détails de peinture complexes conviennent souvent au matriciel. Si le SVG sert à combiner cette image avec des étiquettes ou superpositions vectorielles, un fichier mixte peut être correct. Confirme que l’image a assez de résolution à la taille physique finale et décide si le livrable doit être autonome ou accompagné des ressources liées.

Relie à nouveau ou intègre lorsque le transport pose problème

Si une image liée disparaît sur un autre ordinateur, regroupe le SVG et son image avec la même structure relative de dossiers ou intègre l’image avant la livraison. Cela corrige la ressource manquante. Cela ne rend pas l’image modifiable comme tracés.

Remplace le matriciel lorsque des tracés étaient promis

Si un convertisseur a enveloppé un logo en aplats, une icône ou un dessin au trait dans un SVG, retrouve le PNG ou JPEG original. S’il n’est plus disponible, extrais l’image intégrée ou exporte cet objet à sa taille native. Convertis ensuite l’image en tracés vectoriels, examine les formes et remplace l’objet <image> par le résultat vectoriel vérifié.

PerfectVector aide à reconstruire les dessins en aplats adaptés en formes modifiables. Il ne transforme pas magiquement une photo à tons continus en un petit ensemble fidèle de tracés. Pour une photo, garde le matriciel sauf si une interprétation volontairement postérisée est l’objectif. Si tu veux un PNG de livraison d’un SVG approuvé, effectue directement le rendu à la taille finale en pixels avec Sharp ; agrandir un petit PNG ne peut ajouter de détails aux images matricielles intégrées dans ce SVG.

Les utilisateurs de Scratch doivent vérifier pourquoi Convert to Vector ne vectorise pas un bitmap avant d’exporter une autre enveloppe.

Reconstruis les effets rastérisés à l’export

Certains SVG sont principalement vectoriels mais contiennent une ombre, un flou, une texture ou un effet non pris en charge rastérisé. Décide si l’effet doit rester modifiable et transportable. Reconstruis un effet simple avec des fonctions vectorielles prises en charge, aplatis-le volontairement en matriciel à la résolution de livraison ou retire-le. Vectoriser une ombre douce crée généralement des formes bruitées plutôt qu’un meilleur effet.

Examen de livraison des SVG mixtes

Avant d’envoyer le fichier à un site, imprimeur, découpeuse ou collaborateur :

1. Cherche <image, data:image/, .png, .jpg et .jpeg dans la source.
2. Confirme si chaque ressource référencée doit être matricielle, vectorielle ou absente.
3. Déplace temporairement les fichiers liés et rouvre le SVG pour révéler les dépendances cassées.
4. Sélectionne le dessin important et vérifie que les parties destinées à être modifiables sont des tracés.
5. Compare les dimensions natives en pixels de l’image à sa taille finale d’affichage ou d’impression.
6. Rouvre la copie livrée dans une deuxième application.
7. Conserve la source originale et une épreuve matricielle lorsque l’apparence compte davantage que les modifications.

Pour la découpe ou fabrication, retire le contenu matriciel décoratif du fichier machine et effectue les vérifications SVG avant découpe. Une découpeuse suit les tracés ; elle ne transforme pas une photo intégrée en contour de coupe.

FAQ

Un SVG peut-il contenir un PNG ou JPEG ? Oui. Un élément image SVG peut référencer un PNG ou JPEG comme fichier séparé ou porter ses données dans le SVG. L’image matricielle conserve son comportement original en pixels.

Une balise image signifie-t-elle toujours que le SVG contient une image matricielle ? Non. L’élément image peut aussi référencer un autre SVG. Examine sa valeur href ou l’ancienne xlink:href pour vérifier le type de média, l’URL data ou le nom du fichier avant de le classer.

Comment savoir si l’image matricielle est intégrée ou liée ? Une image intégrée a généralement un href commençant par data:image : ses octets se trouvent donc dans le SVG. Une image liée a un chemin ou une URL comme images/photo.png et dépend de cette ressource séparée.

Puis-je retirer une image intégrée d’un SVG ? Oui. Supprime-la si elle est inutile, remplace-la par une ressource matricielle volontaire ou vectorise un dessin en aplats adapté et remplace-la par les tracés obtenus. Garde une sauvegarde avant de modifier le XML.

Pourquoi mon SVG contient-il des tracés et une image ? C’est un SVG mixte. Il peut combiner volontairement une photo et des superpositions vectorielles, ou un exporteur peut avoir rastérisé un effet. Examine les parties devant rester modifiables avant de le changer.

Sources

1. W3C — Contenu intégré SVG 2 — Élément <image>, son href et les ressources matricielles ou SVG référencées.
2. MDN — SVG <image> — Référence pratique du contenu image accepté et du comportement de taille.
3. Guide débutant Inkscape — Importer des images — Images importées liées ou intégrées et compromis de transport.
4. MDN — URL data — Schéma data: souvent utilisé pour stocker des données image dans un SVG.

Tu as trouvé un bitmap enveloppé là où tu voulais des tracés modifiables ? Convertis le dessin original en aplats en vrai vecteur, rouvre le SVG et vérifie que les objets importants se sélectionnent désormais comme formes.