Convertir SVG en WebP
Transformez un fichier vectoriel en WebP à la largeur exacte en pixels dont votre mise en page a besoin. Pratique quand un CMS refuse l'import de SVG, quand un aperçu pour les réseaux sociaux exige une image matricielle, ou quand une illustration contient tellement de tracés que le navigateur peine à l'afficher.
Convertisseur d’images
ou déposez Fichiers JPG, JPEG, JPE … ici ·
95 Mo max. par fichier· Jusqu'à 20 fichiers· Supprimés après 30 minutes
Les fichiers sont traités sur nos serveurs et supprimés après 30 minutes.
85 garde les photos visuellement identiques à l’original. Ne la baissez que si vous avez besoin d’un fichier plus léger.
JPG, BMP et EPS ne gèrent pas la transparence. Les pixels transparents sont remplis avec cette couleur.
Couleur hexadécimale utilisée derrière les pixels transparents, p. ex. #FFFFFF.
Ce format ne contient qu’une seule image. Choisissez une sortie GIF ou WebP pour conserver l’animation.
Une icône multitaille contient plusieurs résolutions dans un seul fichier ; les navigateurs et les systèmes d’exploitation choisissent celle dont ils ont besoin.
Conservez les dimensions d’origine, ou saisissez un côté et les proportions sont conservées.
Pixels du côté choisi ci-dessus.
Pourcentage des dimensions d’origine.
sRGB convient aux écrans et au web. Conservez l’original pour les flux d’impression ; niveaux de gris supprime la couleur.
Métadonnée uniquement, 0 conserve la valeur d’origine. Les imprimantes et certains portails lisent ce nombre ; il ne modifie pas les dimensions en pixels.
Comment utiliser cet outil
- 1
Importez le SVG
Ajoutez jusqu’à 20 fichiers .svg exportés depuis Figma, Illustrator, Inkscape ou une bibliothèque de graphiques, de 95 Mo maximum chacun.
- 2
Définissez la largeur de sortie
Redimensionner l’image de sortie démarre à une largeur de 1200 px ; remplacez-la par le double de la largeur que l’image occupera sur la page. Qualité est réglée sur 90, ou cochez Sans perte dans Réglages avancés pour les logos et icônes en aplats.
- 3
Convertissez en WebP
Cliquez sur Convertir en WebP et téléchargez les fichiers ou un seul ZIP. Les zones transparentes restent transparentes.
Comment convertir un SVG en WebP à une taille précise ?
Importez le SVG, réglez Redimensionner l’image de sortie sur la largeur en pixels voulue (1200 px par défaut), puis cliquez sur Convertir en WebP. Le vecteur est redessiné à cette largeur, sans agrandissement ni flou.
Quand convertir un SVG en WebP
Le SVG est une recommandation du W3C depuis 2001 et c’est le bon format pour la plupart des logos et icônes : quelques kilo-octets de texte, nets à tous les niveaux de zoom. Les problèmes commencent quand un fichier quitte votre propre code. WordPress et de nombreux créateurs de boutiques refusent les SVG, les aperçus de liens sur Facebook, LinkedIn et X sont récupérés sous forme de bitmaps, et les outils de conception exportent des illustrations avec des effets raster intégrés qui transforment un fichier vectoriel en plusieurs mégaoctets de balisage.
Le WebP, publié par Google en 2010 et enfin pris en charge par Safari à partir de la version 14 en 2020, est le format bitmap conçu pour cela : plus léger que le PNG à rendu égal, avec un vrai canal alpha. Générer le WebP directement à sa taille finale évite le détour habituel par un gros export PNG. Pour le sens inverse, notre page WebP en SVG explique pourquoi il faut une vectorisation plutôt qu’une conversion.
Tailles SVG en WebP pour les emplacements web courants
1200 × 630 px
Aperçu de lien Open Graph
Image affichée lorsque la page est partagée
1920 × 1080 px
Illustration d’en-tête pleine largeur
Couvre la plupart des écrans d’ordinateur en 1×
1600 × 900 px
Image de colonne d’article en 2×
Pour une colonne de contenu de 800 px
400 × 100 px
Logo d’en-tête en 2×
Pour un emplacement de logo de 200 × 50 px
SVG
Scalable Vector Graphics
SVG est un format vectoriel fondé sur XML, normalisé par le W3C en 2001. Au lieu de pixels, il décrit des formes, des tracés et du texte ; il reste donc net à n'importe quelle taille et est généralement minuscule pour les logos et icônes. Il prend en charge la transparence, le style CSS, les scripts et l'animation, et tous les navigateurs l'affichent nativement. Le SVG ne convient pas aux photographies, et les illustrations complexes peuvent devenir lentes à afficher. Illustrator, Inkscape, Figma et les navigateurs peuvent l'ouvrir et le modifier.
- Compression
- –
- Transparence
- Oui
- Animation
- Oui
- Année de création
- 2001 · W3C
WEBP
Image WebP
Le WebP est un format d'image publié par Google en 2010 pour accélérer le chargement des pages web. Il prend en charge la compression avec et sans perte, la transparence alpha et l'animation dans un seul format. Les fichiers WebP avec perte sont généralement 25–35 % plus légers que des JPEG de qualité visuelle comparable, et le WebP sans perte est en général plus léger que le PNG. Tous les navigateurs actuels le gèrent, mais certains anciens logiciels de bureau, services d'impression et formulaires d'envoi le refusent encore. Windows, macOS et la plupart des éditeurs d'images récents peuvent ouvrir les fichiers WebP.
- Compression
- Avec ou sans perte
- Transparence
- Oui
- Animation
- Oui
- Année de création
- 2010 · Google
On convertit un SVG en WebP pour obtenir une image bitmap légère, de taille fixe, là où les fichiers vectoriels sont refusés ou lents à afficher, comme un CMS, un aperçu sur les réseaux sociaux ou une page d’atterrissage chargée ; passer de WebP à SVG relève de la vectorisation, pas d’un simple changement de format.
Comment le SVG est converti en image matricielle et ce qu'il faut vérifier
Le convertisseur lit la largeur, la hauteur et la viewBox du SVG, puis dessine chaque tracé à la largeur que vous définissez ; la hauteur suit les proportions. Comme le dessin se fait à la taille finale, les traits fins et les petits textes sont lissés une seule fois, à la bonne échelle. Agrandir ensuite un petit PNG n’est jamais aussi net.
Les polices sont la surprise habituelle. Si le SVG utilise une police qui n’est ni intégrée ni convertie en contours, une police de remplacement est utilisée et la longueur des lignes change. Vectorisez le texte (conversion en contours) dans votre outil de conception avant l’export. Les images externes liées par URL dans le SVG ne sont pas récupérées : intégrez-les ou aplatissez d’abord le visuel.
Convertir SVG en WebP : à faire et à éviter
| À faire | À éviter |
|---|---|
| Générer à 2× la largeur CSS affichée | Convertir de simples icônes intégrées, plus légères en SVG |
| Utiliser Sans perte pour les logos en aplats avec peu de couleurs | Générer à 4000 px pour un emplacement de 600 px |
| Conserver le SVG d’origine pour les tailles futures | Envoyer du WebP dans des newsletters |
| Servir le WebP avec les attributs width et height pour éviter les décalages de mise en page | Compter sur du texte actif : le WebP est fait de pixels, le texte n’est pas sélectionnable |
Questions sur la conversion SVG en WebP
Quelle largeur en pixels choisir pour convertir un SVG en WebP ?
Prenez la largeur d’affichage de l’image en pixels CSS et doublez-la, pour qu’elle reste nette sur les écrans de téléphone et d’ordinateur portable à haute densité. Une illustration affichée dans une colonne de 800 px doit être rendue à 1600 px. Passer à 3× est rarement rentable sur le web : le fichier grossit alors que le gain visible est faible.
Le WebP est-il meilleur que le SVG pour un site web ?
Pas pour les logos, icônes et schémas simples : un SVG propre est minuscule et net à toutes les tailles, gardez-le. Le WebP l’emporte pour les illustrations complexes avec dégradés, filtres ou des milliers de tracés, et partout où seules les images bitmap sont acceptées, comme les aperçus sur les réseaux sociaux ou un CMS sans prise en charge du SVG.
Le WebP conserve-t-il le fond transparent de mon SVG ?
Oui. Le WebP dispose d’un vrai canal alpha, en mode avec perte comme sans perte : les zones sans remplissage dans le SVG restent donc transparentes. Les bords des formes sont lissés par rapport à la transparence, ce qui rend bien sur n’importe quelle couleur de fond.
WebP avec ou sans perte pour une illustration vectorielle ?
Le mode sans perte convient aux logos, icônes et graphiques en aplats avec quelques couleurs unies : ils se compressent très bien et gardent des bords parfaitement nets. Le mode avec perte à une qualité de 85 à 90 convient aux illustrations avec dégradés, ombres ou textures, pour lesquelles les fichiers sans perte deviennent lourds. Essayez les deux sur un fichier et gardez le plus léger des résultats qui reste propre.
Pourquoi ne puis-je pas importer de SVG dans WordPress ?
WordPress exclut le SVG des types de fichiers autorisés, car un SVG peut contenir des scripts. Il accepte le WebP depuis la version 5.8, sortie en 2021 : la conversion vous donne donc un fichier que la médiathèque accepte sans extension de sécurité. Les sites qui ont besoin de vrais vecteurs peuvent toujours activer le SVG avec une extension qui nettoie les fichiers.
Puis-je utiliser le WebP dans une newsletter par e-mail ?
Évitez. Plusieurs clients de messagerie, dont Outlook pour Windows, n’affichent pas le WebP, et Gmail n’affiche pas non plus le SVG. Pour un e-mail, générez plutôt l’image avec SVG en PNG.
