Pourquoi ton SVG semble pixellisé et comment le corriger

Un SVG est censé se redimensionner proprement. S’il montre malgré tout des bords pixellisés, commence par trois causes courantes. Le fichier peut contenir de vrais pixels, une application peut rastériser son aperçu ou son importation, ou un vrai vecteur peut simplement apparaître flou sur une minuscule grille de pixels. Chaque cause a une correction différente et un court diagnostic permet de savoir laquelle s’applique. Cet article ne porte pas sur un logo PNG ou JPG se pixellisant à l’agrandissement. Ce fichier n’a jamais été un SVG et ce problème possède sa propre correction.

Diagnostic en 30 secondes

• Zoome fortement (500 % ou plus) dans deux visualiseurs. Des blocs partout indiquent un contenu matriciel. Si une seule application affiche des blocs, elle rastérise probablement l’aperçu.
• Ouvre le SVG dans un éditeur de texte. Une balise <image> avec un long bloc data:image/png;base64,… signifie que ton « vecteur » est un bitmap déguisé.
• Utilise l’examen du fichier pour décider. Le zoom éveille le soupçon ; un élément <image> ou un objet image rectangulaire confirme les pixels intégrés.

Cause 1 : ton SVG contient des pixels

C’est le piège de l’image intégrée. SVG est un format conteneur et la spécification SVG 2 autorise un élément <image> intégrant ou référençant du contenu matriciel. Pour distinguer un PNG lié de données intégrées ou d’un SVG imbriqué, utilise l’examen des SVG à contenu mixte. Les outils peuvent employer cette possibilité de plusieurs façons :

• Fausses conversions. Certains outils « PNG vers SVG » ne vectorisent rien. Ils enveloppent le bitmap dans une balise <image> et le renvoient avec une extension .svg. Il se redimensionne aussi mal que le PNG original, parce qu’il est le PNG original.
• Exports rastérisant les éléments difficiles. Les applications exportent en tracés ce qu’elles peuvent et rastérisent discrètement le reste : ombres portées, flous, filets de dégradé, remplissages d’image. Un logo devient ainsi net partout sauf à une courbe ou un effet, ce mystère du fichier « partiellement pixellisé » fréquent sur les forums.
• Contenu photographique. Une photo ne devient pas des tracés propres : les outils la « convertissant » en SVG l’intègrent souvent ou produisent une approximation postérisée. Les outils cartographiques le font même volontairement pour les couches d’ombrage, ce qui est légitime puisqu’elles sont naturellement à tons continus.
• Enveloppes de format. Un fichier peut porter des données vectorielles qu’une application lit et une autre non. Si l’application ne comprend pas les données, elle utilise l’aperçu matriciel intégré : tu vois des pixels dans un programme et des vecteurs nets dans un autre.

Comment le confirmer : ouvre le .svg dans un éditeur de texte et cherche <image. Un bloc base64 désigne le responsable. Dans Inkscape ou Illustrator, clique sur la zone floue : si la sélection est un objet « image » rectangulaire au lieu de tracés, la réponse est identique. C’est la même vérification qui repère les faux SVG issus d’outils IA et d’exporteurs et prend moins d’une minute.

La correction : les pixels doivent devenir des tracés, donc le contenu matriciel doit réellement être vectorisé. Passe l’image originale ou intégrée dans une véritable conversion image vers vecteur et remplace l’élément <image> par le résultat. Si le contenu est une photo, la vectorisation a ses propres limites ; parfois, la bonne correction est d’accepter le matriciel là où il convient.

L’indice dans le fichier lui-même

Cause 2 : le fichier est correct, le visualiseur rastérise

Si un navigateur ou Inkscape affiche des tracés nets tandis qu’une application affiche des blocs, arrête de modifier le fichier. Le problème vient de sa chaîne d’importation ou d’aperçu :

• Certaines chaînes d’importation rastérisent un SVG à la taille d’importation ou d’aperçu. Agrandir ensuite cette image en cache agrandit un bitmap. La correction dans l’application consiste à importer ou rendre à la résolution cible.
• After Effects peut rastériser en continu les calques vectoriels lorsqu’ils se transforment ; Adobe documente la commande Continuously Rasterize. Si seul l’aperçu de composition est irrégulier, examine sa résolution et cette commande avant de changer le SVG.
• Illustrator peut afficher volontairement le dessin avec Pixel Preview. Désactive View > Pixel Preview avant de conclure que le tracé est pixellisé.
• Miniatures et aperçus. Les miniatures du gestionnaire de fichiers et aperçus rapides sont des rendus matriciels basse résolution. Ils n’indiquent rien sur le fichier.

Le test universel : ouvre le même fichier dans un navigateur ou Inkscape. S’il y est net, ton SVG est sain et la correction se trouve dans les réglages d’importation ou d’aperçu de l’autre application.

Pour les ressources de jeu, vérifie la procédure d’importation et rastérisation SVG de Godot ou la méthode d’importation Unity pour ton éditeur et système d’interface avant de supposer l’absence de tracés dans la source.

Cause 3 : un vrai vecteur flou à petite taille

Les icônes occupent 16 à 24 pixels : à cette taille, une courbe mathématiquement parfaite doit se placer sur une grille grossière. L’anticrénelage répartit les pixels de bord en gris et le résultat paraît « légèrement flou », surtout pour les traits fins et positions de demi-pixel. Le zoom montre des bords vectoriels parfaitement nets, ce qui distingue ce cas du piège de l’image intégrée.

Les corrections concernent la conception : aligne les bords horizontaux et verticaux sur des pixels entiers à la taille cible, garde des épaisseurs de trait en pixels entiers et préfère des icônes dessinées pour la taille utilisée. Des données de tracé très précises issues d’exports peuvent aggraver le flou à petite taille ; les tracés simplifiés ont un rendu plus prévisible.

Causes et corrections en un coup d’œil

Éviter les pixels dans tes SVG

La prévention concerne surtout la conversion ou l’export. Avant de te fier à un SVG, examine-le une fois dans un éditeur de texte : les éléments <path> sont bons ; les blocs <image> ne sont pas des vecteurs. Utilise un convertisseur qui vectorise plutôt que d’envelopper et confirme le résultat par la sélection de formes individuelles. À l’export depuis un outil de dessin, aplatis ou décompose d’abord les effets en tracés, car ce que l’exporteur ne peut exprimer en vecteurs sera livré en pixels. Garde à l’esprit ce qu’est réellement un SVG : l’extension promet un format, pas un contenu.

Comment cela fonctionne avec PerfectVector

PerfectVector évite ce piège : il reconstruit l’image en vrais tracés sans l’envelopper. Envoie un PNG ou JPG et le résultat est composé de formes sélectionnables, recolorables et agrandissables, avec chaque couleur comme objet modifiable distinct et aucun élément <image> dans le fichier. Si tu viens de découvrir que ton « SVG » est un bitmap déguisé, convertis correctement l’image originale et effectue le même examen textuel de la sortie. Voir une fois la différence est le moyen le plus rapide d’éviter ce piège ensuite. Les premières conversions sont gratuites, sans carte bancaire.

FAQ

Pourquoi mon SVG semble-t-il pixellisé quand je zoome ? Le zoom seul ne prouve pas la présence de pixels, car certaines applications rastérisent leurs aperçus. Ouvre le fichier dans un navigateur ou Inkscape, puis cherche un élément <image> dans sa source ou sélectionne la zone floue pour vérifier si c’est un objet image rectangulaire. Si cela confirme un matriciel intégré, vectorise ce contenu et remplace l’élément image.

Comment savoir si mon SVG contient une image intégrée ? Ouvre-le dans un éditeur de texte et cherche <image. Une longue chaîne data:image/png;base64 est un bitmap intégré. Tu peux aussi cliquer sur la zone floue dans Inkscape ou Illustrator : si elle se sélectionne comme image rectangulaire plutôt que comme tracés, elle est intégrée.

Pourquoi mon SVG est-il pixellisé dans une application et correct dans le navigateur ? L’application le rastérise. Les moteurs de jeu le font à la taille d’importation, les aperçus After Effects à la résolution de composition et certaines applications affichent par défaut les images intégrées avec une interpolation qui fait apparaître les blocs de pixels. Si le navigateur ou Inkscape affiche un résultat net, le fichier est correct : ajuste les réglages de l’application.

Puis-je corriger un SVG contenant une image intégrée ? Oui. Prends l’original matriciel ou extrais l’image intégrée, passe-le dans un vrai vectoriseur et remplace l’élément image par le résultat. Pour une photo, attends-toi à une approximation stylisée plutôt qu’à une copie fidèle, car les photos ne se réduisent pas en tracés propres.

Pourquoi mes icônes SVG sont-elles floues à petite taille ? C’est généralement dû à la grille de pixels plutôt qu’à une image intégrée. Entre 16 et 24 pixels, l’anticrénelage transforme les bords mal alignés en pixels gris. Aligne les bords et épaisseurs sur des pixels entiers à la taille cible pour améliorer la netteté. Zoome pour confirmer que les tracés eux-mêmes sont nets.

Convertir un PNG en SVG produit-il toujours de vrais vecteurs ? Non. Certains outils reconstruisent réellement l’image en tracés et d’autres enveloppent simplement le PNG dans un conteneur SVG. La sortie se redimensionne proprement seulement dans le premier cas. Cherche les balises image dans chaque fichier converti et préfère un convertisseur affichant des formes modifiables dans le résultat.

Sources

1. W3C : contenu intégré SVG 2 — Élément SVG <image> et contenu matriciel dans un document SVG.
2. Adobe Illustrator : affichage des dessins — Pixel Preview et autres modes d’affichage.
3. Adobe After Effects : calques — Commande Continuously Rasterize pour les calques vectoriels.
4. Adobe Illustrator : créer un dessin aligné sur les pixels — Alignement sur la grille pour les dessins à petite taille.

---

Un fichier te semble suspect ? Effectue le test du zoom, puis convertis l’image originale en vrai SVG à base de tracés et compare. Les pixels se cachent ; les tracés non.