Comment utiliser l'outil PNG en SVG
- Déposez un sprite PNG, GIF ou WebP.
- Choisissez un mode de sortie : un chemin par couleur (le plus léger), rectangles fusionnés ou un rectangle par pixel.
- Réglez la taille d'affichage ; la viewBox reste en pixels, donc le SVG se redimensionne proprement de toute façon.
- Ajoutez éventuellement un fond uni.
- Téléchargez le .svg ou copiez le code.
Ce que vous obtenez
- SVG avec shape-rendering="crispEdges"
- Comparaison de la taille du fichier selon le mode
- Code source SVG à copier
Conseils tirés de nos propres jeux
- Le mode chemins est généralement le plus léger : c'est celui qu'il vous faut pour le web, les icônes et la découpe laser.
- Le mode rectangles est le plus simple à retoucher à la main ou à animer en CSS, puisque chaque bloc est un élément à part.
- Gardez des sprites petits. Un sprite 64×64 se convertit instantanément ; une image photoréaliste avec des milliers de couleurs donne un SVG énorme.
- Les pixels semi-transparents deviennent du fill-opacity, donc les ombres douces survivent à la conversion.
Cas d'usage
- Utiliser des sprites comme icônes ou logos nets sur un site web
- Imprimer du pixel art en grand format (affiches, stickers, produits dérivés)
- Importer du pixel art dans Figma, Illustrator ou Inkscape
- Découpe laser et découpe vinyle à partir de motifs en pixels
FAQ
La conversion est-elle sans perte ?
Oui. Chaque pixel est couvert par exactement une forme, avec sa couleur et son alpha exacts. Rastérisez le SVG à la taille d'origine et vous retrouvez le PNG d'origine.
Pourquoi ne pas simplement vectoriser l'image ?
Les outils de vectorisation lissent les bords en courbes, ce qui ruine le pixel art. Ce convertisseur garde des angles droits nets, calés sur la grille de pixels.
Quel mode donne le fichier le plus léger ?
Les chemins. Les rectangles de même couleur partagent un seul élément path avec des commandes relatives courtes. L'outil affiche la taille de chaque mode pour comparer.
Le rendu sera-t-il flou une fois agrandi ?
Non. Le SVG utilise shape-rendering="crispEdges" et des coordonnées entières, donc les bords restent nets à tout niveau de zoom.
Y a-t-il une limite de taille ?
Jusqu'à 512×512 pixels. Au-delà, les SVG deviennent trop lourds pour être utiles.
Mon image est-elle envoyée sur un serveur ?
Non, la conversion se fait dans votre navigateur.