Convertissez des images matricielles PNG ou JPG en graphiques vectoriels SVG évolutifs. Traitement sécurisé et rapide directement dans votre navigateur.
Jusqu'à 50 Mo
La conversion de PNG en SVG est fondamentalement une opération de traçage, pas un changement de format. PNG stocke les pixels ; SVG stocke les primitives géométriques. Passer d'une grille de pixels à des chemins vectoriels évolutifs nécessite d'interpréter le bitmap et de dessiner des formes approximatives autour de régions de couleur similaire. Le résultat est véritablement évolutif — vous pouvez redimensionner librement sans pixellisation — mais ce n'est pas une reproduction parfaite de la source. Le contenu photographique ne trace pas bien, car chaque variation de couleur au niveau d'un pixel devient une forme, produisant d'énormes SVG qui vont à l'encontre de l'objectif. Les logos, les icônes, les dessins au trait et les graphiques à contraste élevé sont tracés proprement car ils comportent un petit nombre de régions de couleur avec des limites bien définies.
Ce convertisseur utilise la bibliothèque imagetracerjs, un port JavaScript d'algorithmes de traçage vectoriel similaires à potrace. Le PNG est décodé en un bitmap RGBA, le bitmap est segmenté en régions de couleurs à l'aide d'une palette configurable, la limite de chaque région est tracée dans un chemin, les chemins sont simplifiés à l'aide de l'approximation de Bézier et les chemins résultants sont émis en tant qu'éléments de chemin SVG. L'ensemble du pipeline s'exécute dans votre navigateur sans aucun téléchargement sur le serveur.
Les paramètres de traçage contrôlent le compromis entre la fidélité et la taille du fichier. Plus de couleurs et des détails plus fins produisent un SVG plus grand qui correspond plus étroitement à la source ; moins de couleurs et un traçage plus grossier produisent un SVG plus petit avec une sensation plus stylisée. Les valeurs par défaut sont adaptées aux logos et aux icônes ; les images complexes peuvent bénéficier d'une passe de traçage avec des paramètres ajustés, ou peuvent tout simplement ne pas être de bons candidats pour la vectorisation.
La vectorisation d’un fichier PNG est particulièrement utile lorsque vous devez redimensionner l’image au-delà de sa résolution d’origine. Les logos, en particulier, arrivent souvent au format PNG de taille modeste et doivent apparaître nets sur les panneaux d'affichage, les écrans Retina et les impressions grand format. Une trace vectorielle produit un SVG qui évolue sans perte de qualité ; le compromis est la fidélité aux pixels d'origine.
SVG est également nettement plus compact que PNG pour les graphiques comportant peu de couleurs et de grandes zones plates. Une icône PNG à 256 × 256 peut faire 8 Ko ; le SVG équivalent à deux ou trois couleurs fait souvent moins de 1 Ko. Pour les bibliothèques d'icônes d'interface utilisateur fournies sur une interface Web, les versions vectorielles réduisent la taille du paquet et améliorent la netteté sur toutes les densités d'affichage.
Déposez un PNG, choisissez les paramètres de traçage, générez un SVG.
imagetracerjs implémente un pipeline à plusieurs étapes : la quantification des couleurs réduit le bitmap à un nombre fixe de couleurs en utilisant le regroupement k-means ou la coupe médiane ; la détection des contours identifie les limites de pixels entre les régions ; le traçage des contours suit les limites pour produire des polygones fermés ; L'ajustement de lignes et de courbes rapproche les polygones avec des courbes de Bézier pour réduire les données de chemin.
Les paramètres d'algorithme les plus importants sont le nombre de couleurs (typique : 4 à 32), le pathomit (les chemins plus courts que ce nombre de pixels sont rejetés comme bruit), ltres (tolérance de ligne – dans quelle mesure un bord peut s'écarter avant d'être divisé en un nouveau segment) et qtres (tolérance de courbe quadratique – avec quelle agressivité les courbes sont lissées). Les valeurs par défaut fonctionnent bien pour les logos ; les images complexes bénéficient d’un réglage par image.
La sortie est SVG 1.1 standard avec des éléments de chemin. Chaque région de couleur devient un chemin avec un attribut de remplissage. Le fichier résultant s'ouvre dans n'importe quel navigateur, éditeur vectoriel ou outil de conception compatible SVG. La taille du fichier dépend principalement du nombre de chemins et de la densité des nœuds ; un logo tracé typique fait 1 à 10 Ko.