Comment convertir un logo SVG en PNG à la bonne taille
Mis à jour:
Le SVG est le format idéal pour un logo : il est dessiné à partir de formes, pas de pixels, et reste net à toute taille. Mais les diaporamas, réseaux sociaux, signatures d'e-mail et beaucoup de créateurs de sites n'acceptent que des images matricielles comme le PNG. Convertir est facile ; c'est la taille qu'on rate souvent. Nous avons fait l'essai avec le logo de ce site.
Pourquoi le PNG
Le PNG est le format matriciel le plus proche de ce qu'offre le SVG : sans perte, avec des bords nets et un fond transparent, pour un logo propre sur n'importe quelle couleur.
Convertir le SVG
- Ouvrez SVG en PNG.
- Téléversez le fichier SVG.
- Téléchargez le PNG : le fond reste transparent.
Viser la bonne taille
Le PNG est dessiné à la taille déclarée dans le SVG : ses attributs width et height, ou sa viewBox à défaut. Notre propre logo illustre bien le piège. Son fichier ne déclare que viewBox="0 0 32 32" : le PNG est donc sorti en 32 × 32 pixels, parfait pour un onglet de navigateur, inutilisable dans une présentation.
La correction prend une minute. Ouvrez le SVG dans n'importe quel éditeur de texte, repérez la balise <svg> du début et ajoutez width et height dans les mêmes proportions que la viewBox, par exemple width="512" height="512". Enregistrez et reconvertissez : le logo est redessiné à partir de ses formes à la nouvelle taille.
Ce que nous avons mesuré
Nous avons converti notre logo de 304 octets après avoir déclaré quatre tailles différentes. Chaque PNG a été redessiné à partir des formes : même le plus grand a des bords parfaitement nets, et les fichiers restent légers parce qu'un logo, c'est surtout des aplats.
| Taille déclarée dans le SVG | PNG obtenu | Poids du PNG |
|---|---|---|
| viewBox seule (32 × 32) | 32 × 32 px | 0,7 Ko |
| width et height 512 | 512 × 512 px | 11,7 Ko |
| width et height 1024 | 1024 × 1024 px | 25,7 Ko |
| width et height 2048 | 2048 × 2048 px | 60 Ko |
Pourquoi ne pas agrandir un petit PNG ?
Nous l'avons essayé aussi. Étiré à 512 pixels dans un logiciel d'image, le PNG de 32 pixels est devenu un carré mou et flou : le logiciel ne peut que deviner les pixels manquants. La version redessinée depuis le SVG à 512 pixels était nette. Revenez toujours au SVG et convertissez à la taille voulue, plutôt que d'agrandir un PNG existant.
D'autres formats depuis le même SVG
SVG en WebP garde le fond transparent et a donné un fichier plus léger : 5,6 Ko pour le logo de 512 pixels contre 11,7 Ko en PNG, idéal pour le web. SVG en JPG fonctionne aussi, mais le JPG n'a pas de transparence : le fond devient blanc. Pour l'impression, choisissez SVG en PDF : le logo reste un dessin vectoriel, net à toute taille d'impression, et le nôtre pesait 1,2 Ko quelle que soit la taille déclarée.
Attention aux polices
Si le texte du logo utilise une police ni intégrée ni vectorisée, il peut être dessiné avec une police proche. Les graphistes vectorisent généralement le texte avant de livrer un logo ; si le vôtre paraît différent, demandez une version vectorisée. Les images que le SVG lie depuis d'autres sites ne sont pas chargées.
Comment nous avons testé
Nous avons utilisé le fichier du logo que sert ce site, sans autre changement que la largeur et la hauteur ajoutées, et l'avons converti avec les convertisseurs SVG de ce site, qui dessinent l'image avec librsvg sur le même logiciel que nos serveurs. Le poids des fichiers de votre logo dépendra de ses couleurs et de ses détails, mais la règle vaut pour tout SVG : la taille déclarée décide de la taille du PNG.
Pour aller plus loin: MDN — SVG: Scalable Vector Graphics