Convertisseur SVG vers PNG

Comment convertir un SVG en PNG

Collez votre code SVG dans la zone de saisie, ajustez eventuellement le facteur d'echelle et cliquez sur "Convertir en PNG". L'outil analyse le SVG, le rend sur un element Canvas HTML5 et exporte le canvas en image PNG. L'apercu affiche l'image convertie et vous pouvez la telecharger en un seul clic. L'ensemble du processus se deroule dans votre navigateur. Votre code SVG n'est jamais transmis a aucun serveur, ce qui rend cet outil sur pour les logos proprietaires, les icones et les ressources de design.

Le facteur d'echelle controle la resolution de sortie. Une echelle de 1x produit un PNG aux dimensions natives du SVG telles que definies par son viewBox ou ses attributs width/height. Une echelle de 2x double les dimensions, ce qui est ideal pour les ecrans Retina et les ecrans haute resolution. Les echelles superieures produisent des images plus grandes et plus detaillees adaptees aux supports imprimes. Le panneau de statistiques affiche les dimensions de sortie, le nombre d'elements SVG et la taille du fichier SVG original afin que vous puissiez evaluer la complexite et la taille de votre graphique.

SVG vs PNG : quand utiliser chaque format

SVG et PNG servent des objectifs differents et comprendre quand utiliser chacun est important pour les performances web et la qualite visuelle. SVG est un format vectoriel qui decrit les formes mathematiquement en utilisant XML. Il s'adapte a n'importe quelle taille sans perte de qualite, ce qui le rend parfait pour les logos, les icones, les illustrations, les graphiques et tout element visuel devant etre net a plusieurs tailles. Les fichiers SVG sont souvent plus petits que les images raster equivalentes pour les graphiques simples et peuvent etre stylises avec CSS, animes avec JavaScript et rendus accessibles avec un balisage correct.

PNG est un format raster qui stocke les images sous forme de grille de pixels. Il prend en charge la compression sans perte et la transparence, ce qui en fait le format standard pour les captures d'ecran, les images complexes avec du texte et les graphiques devant etre affiches dans des environnements ne prenant pas en charge le SVG. Les images PNG ont une resolution fixe, elles peuvent donc apparaitre floues lorsqu'elles sont agrandies au-dela de leurs dimensions originales. Pour les photographies, JPEG ou WebP offrent generalement une meilleure compression, mais PNG reste le meilleur choix lorsque la transparence ou le rendu de texte au pixel pres est necessaire.

Comment fonctionne la conversion via l'API Canvas

Le processus de conversion utilise le moteur de rendu SVG integre au navigateur et l'API Canvas HTML5. Tout d'abord, le balisage SVG est converti en URL de donnees. Un element Image est cree avec cette URL de donnees comme source. Une fois l'image chargee, elle est dessinee sur un element Canvas a l'echelle specifiee. La methode toDataURL('image/png') du Canvas exporte ensuite les pixels rendus sous forme de PNG encode en base64. Cette approche exploite le moteur de rendu SVG natif du navigateur, qui gere les fonctionnalites SVG complexes incluant les degrades, les filtres, le texte, les chemins de decoupage et les polices integrees.

Limitations et considerations

Certaines fonctionnalites SVG peuvent ne pas se convertir parfaitement selon le navigateur. Les ressources externes referencees dans le SVG, telles que les feuilles de style liees, les polices chargees via @font-face ou les images referencees par URL, peuvent ne pas etre disponibles lors du rendu canvas en raison des restrictions d'origine croisee. Pour de meilleurs resultats, integrez toutes les ressources directement dans le SVG en utilisant des styles inline, des polices integrees et des URI de donnees pour les images. Les SVG reposant sur des animations CSS ou des interactions JavaScript seront captures sous forme d'instantane statique a leur etat initial.

Foire aux questions

Pourquoi convertir un SVG en PNG ?

Toutes les plateformes ne prennent pas en charge le SVG. Les clients de messagerie, certaines plateformes de reseaux sociaux et les logiciels anciens necessitent des formats raster comme le PNG. Le PNG preserve la transparence, ce qui le rend ideal pour les logos sur des arriere-plans varies.

Cet outil est-il confidentiel ?

Oui. Tout fonctionne dans votre navigateur via l'API Canvas. Aucune donnee n'est envoyee a un serveur. Votre code SVG et les images converties restent entierement sur votre appareil.

Quelle echelle utiliser ?

1x pour les ecrans standard, 2x pour les ecrans Retina et haute resolution, 3x pour l'impression. Les echelles superieures produisent des fichiers plus volumineux. Choisissez en fonction de l'utilisation prevue du PNG.

Puis-je convertir des SVG animes ?

L'outil capture un instantane statique de l'etat initial du SVG. Les animations SMIL et CSS ne sont pas preservees dans la sortie PNG. Pour du contenu anime, envisagez les formats GIF ou video.

Quels navigateurs prennent en charge cet outil ?

Tous les navigateurs modernes avec prise en charge de l'API Canvas : Chrome, Firefox, Safari, Edge et Opera sur ordinateur et mobile. Utilisez la derniere version pour de meilleurs resultats.