Deux fichiers qui finissent tous les deux en .svg

Ouvrez deux SVG « convertis » dans un éditeur de texte. Le premier contient un seul élément <image> dont le href est une longue chaîne data:image/png;base64,…. Le second contient des éléments <path> avec des coordonnées d="M12 4 L…" et chacun sa couleur fill. Les deux s’ouvrent dans un navigateur et s’affichent correctement à la taille d’origine. Seul le second est vectoriel.

L’enveloppe porte bien son nom : c’est le bitmap d’origine, glissé dans un conteneur SVG. Agrandissez-le et le navigateur étire les pixels, si bien que les bords deviennent flous exactement comme avec le PNG. Les machines de découpe et les éditeurs vectoriels ne peuvent sélectionner aucune forme à l’intérieur, parce qu’il n’y a pas de formes — juste un rectangle de pixels.

Un SVG vectorisé décrit l’image sous forme de géométrie. Chaque zone de couleur devient un contour fermé fait de segments droits et de courbes de Bézier ; le moteur de rendu remplit ce contour à la taille demandée, si bien que les bords restent nets à 10 mm comme à 10 m.

Ce que produit png2svg.art

Le traceur regroupe les pixels de votre image en un petit nombre de couleurs unies, puis trace le contour de chaque zone de couleur avec des segments droits et des courbes de Bézier. Là où deux couleurs se touchent, elles partagent une seule frontière : aucun espace ne s’ouvre entre elles. Le résultat contient un <path> par forme, rempli de sa couleur, groupé par objet et imbriqué selon ce qui entoure quoi (avec Calques réglé sur Par couleur, un <path> par couleur). Les trous, comme l’intérieur d’un « O », restent ouverts quelle que soit la règle de remplissage SVG. Il n’y a ni élément <image>, ni bitmap intégré, ni script : chaque résultat est vérifié avant d’être stocké, et il ne peut contenir que des tracés, des groupes et des titres.

Comme la géométrie est réelle, l’aperçu indique un vrai nombre de tracés et la palette utilisée. Si un logo revient avec 6 tracés et 6 couleurs, c’est exactement ce que contient le fichier.

Les lettres Fe d’un logotype agrandies deux fois : à gauche, les pixels d’un PNG de 256 px, aux bords en escalier ; à droite, le SVG vectorisé, aux bords lisses

Le « Fe » de l’un de nos logotypes d’exemple, agrandi de la même façon : le PNG de 256 px laisse voir sa grille de pixels (à gauche) ; le SVG vectorisé à partir de l’image en taille réelle dessine les mêmes bords en courbes, nets à toutes les tailles (à droite).

Vérifier n’importe quel SVG vous-même

  1. Ouvrez le fichier dans un simple éditeur de texte. Cherchez des éléments <path, <polygon ou <circle — de la géométrie. Cherchez <image — une enveloppe.
  2. Ouvrez-le dans un navigateur et zoomez à 800 %. Les bords vectoriels restent nets ; une enveloppe devient floue ou pixellisée.
  3. Importez-le dans un éditeur vectoriel comme Inkscape. Un fichier vectorisé vous laisse cliquer sur chaque forme ; une enveloppe se sélectionne comme une seule image.
  4. Comparez le poids des fichiers. Un PNG enveloppé pèse au moins autant que le PNG (le base64 ajoute environ un tiers) ; un logo vectorisé ne fait généralement que quelques kilo-octets.

Ce que la vectorisation ne peut pas faire

La vectorisation reconstruit des zones unies. Elle ne retrouve pas un détail qui n’a jamais été dans les pixels : une icône de 64 pixels de large, vectorisée avec n’importe quel réglage, reste un dessin de 64 pixels de large dont les courbes sont devinées à partir de ces pixels. Les photos et les dégradés doux deviennent des bandes de couleur unie (voir le guide qui explique pourquoi les photos se postérisent). Le texte devient des contours, pas du texte modifiable. Ce sont des propriétés de la technique, pas un réglage que l’on peut désactiver. Les images qui se vectorisent bien, et celles qui ne s’y prêtent pas, sont détaillées sur la page image en vecteur.

Pourquoi l’aperçu compte

png2svg.art affiche un aperçu avec filigrane du résultat vectorisé avant que vous ne débloquiez quoi que ce soit ; le SVG sans filigrane n’est créé pour le téléchargement qu’après le déblocage. L’aperçu est dessiné à partir des mêmes tracés que ceux que vous téléchargeriez : si un petit lettrage s’est fondu ou si un trait fin s’est rompu, vous le voyez avant de dépenser un crédit. Débloquer un SVG sans filigrane coûte 1 crédit ; chaque compte vérifié reçoit 3 crédits gratuits.