Convertisseur SVG en WebP

La qualité par défaut est ici de 92, nettement plus que les 75–82 qu’on utiliserait pour une photo, et c’est voulu.

Toute compression avec perte est réglée pour des variations de couleur progressives. Les SVG produisent l’inverse : de grands aplats parfaitement unis qui se rencontrent en contours francs. À qualité moyenne, cela se traduit par de légères taches dans les formes pleines et un halo doux le long des frontières, bien plus visibles sur un logo propre que le même réglage ne le serait sur une photo.

• 95–100 : pratiquement impossible à distinguer d’un rendu sans perte. Pour les logos, les icônes et tout ce qui contient du texte.
• 88–94 : la plage par défaut. Propre sur la plupart des œuvres.
• 75–87 : les artefacts deviennent visibles autour des contours et dans les aplats.
• Sous 75 : nettement dégradé sur des graphismes.

Rendez plus grand avant d’augmenter la qualité. Les artefacts évoluent avec la taille des pixels : un rendu à 2048 px en qualité 90 bat généralement un rendu à 512 px en qualité 100, et reste net si l’image est un jour affichée plus grande.

Comme pour toute rastérisation de SVG, vérifiez vos polices. Si le fichier nomme une police au lieu de convertir le texte en tracés, le moteur de rendu la remplace par ce dont il dispose. Convertissez le texte en tracés dans votre logiciel si le lettrage compte.

Choisir entre les trois cibles matricielles

• WebP : le meilleur pour un site que vous maîtrisez. Transparence, contours propres, fichier le plus léger.
• PNG : le meilleur quand vous ne savez pas ce qui l’ouvrira. Transparence, contours propres, pris en charge partout, fichier plus lourd.
• JPG : seulement quand quelque chose l’exige précisément. Pas de transparence, et sa compression convient mal aux aplats.

Servir à la fois un vecteur et une image matricielle

Si vous voulez la netteté du SVG là où il est pris en charge et une image matricielle de repli ailleurs, l’élément <picture> s’en charge :

<picture>
  <source srcset="logo.svg" type="image/svg+xml">
  <img src="logo.webp" alt="…">
</picture>

En pratique, tous les navigateurs actuels prennent le SVG : cela protège surtout contre des clients inhabituels.

Comment nous traitons le SVG en toute sécurité

Le SVG est un document structuré plutôt qu’un bloc de pixels, et un fichier malveillant peut tenter des choses dont une photo est incapable : lire des fichiers du serveur, lancer des requêtes réseau sortantes ou transporter des scripts. C’est précisément pourquoi tant de plateformes refusent les SVG et envoient les gens ici.

Deux choses le rendent sûr ici. Vous recevez un WebP, jamais le SVG : rien de ce que contient le fichier ne peut s’exécuter dans votre navigateur. Et chaque envoi est contrôlé avant que quoi que ce soit ne l’analyse : déclarations de type de document, définitions d’entités, scripts, gestionnaires d’événements et références à des ressources externes entraînent le refus du fichier plutôt que sa réparation. Les images intégrées en data URI et les références internes comme les dégradés ne sont pas touchées : les exports ordinaires des logiciels de dessin se convertissent normalement.

Convertir un jeu d’icônes

Ajoutez autant de fichiers que vous voulez ; chacun est rendu à la largeur choisie, avec son propre téléchargement. S’il vous faut la même icône en plusieurs tailles, lancez le lot une fois par taille : chaque passage part du vecteur au lieu de redimensionner un résultat précédent, si bien que chaque taille est tout aussi nette.