Convertir SVG en WebP

Un SVG est un jeu d’instructions — tracer ce chemin, remplir cette forme, dessiner ce trait — sans résolution propre. Le rendu suit ces instructions à une taille particulière et enregistre le résultat en pixels, et à partir de ce moment le dessin a disparu et il ne reste que l’image.

La taille choisie au moment de la conversion est donc la taille que vous obtenez. Agrandir le WebP ensuite ne peut qu’inventer les pixels du milieu, ce qui est exactement la situation que l’art vectoriel existe pour éviter. Bien choisir l’échelle est tout l’art de cette conversion ; le reste n’est qu’un détail.

Un écran de téléphone contient deux à trois pixels physiques par pixel CSS, si bien qu’une image rendue exactement à sa taille d’affichage paraît molle sur la plupart des appareils qui la verront. Rendre à deux ou trois fois et laisser le navigateur réduire est la pratique standard, et cela coûte moins qu’il n’y paraît : un logo plat à 2× se compresse à une fraction de ce que pèserait une photographie aux mêmes dimensions.

L’exception est tout ce qui est réellement grand. Un hero pleine largeur rendu à 3× produit un fichier que personne ne devrait télécharger ; là, rendez à 2× et acceptez, ou envisagez de servir le SVG directement.

Un SVG nomme ses polices plutôt que de les contenir. Quand le moteur de rendu a la police, le texte est dessiné correctement ; quand il ne l’a pas, autre chose le remplace, à des largeurs différentes — un wordmark composé dans une police sous licence arrive dans un sans-serif générique, à la mauvaise largeur, et la mise en page autour se casse.

La correction se fait dans le logiciel de dessin, avant l’export : convertissez le texte en chemins, et les lettres deviennent des tracés qui ne dépendent de rien. Le texte cesse d’être éditable et devient fiable, ce qui pour un logo est le bon arbitrage. Pour un schéma avec des légendes, vous pouvez préférer garder le texte et incorporer la police dans le SVG à la place.

Le WebP écrit ici est toujours avec perte — la commande de qualité décide à quel point l’encodeur serre, et il n’y a pas de mode sans perte sur cette paire. La valeur par défaut de 82 est réglée pour des photographies, et sur de l’art vectoriel cela se voit au mauvais endroit : un trait d’un pixel prend un flou, et la frontière entre deux aplats gagne un halo de pixels intermédiaires.

Montez à 95 ou plus pour un logo, une icône ou un graphique, et ces artefacts disparaissent tandis que le fichier reste petit, car un aplat se compresse bien à n’importe quel réglage. Une illustration avec des dégradés et des ombrages doux se comporte comme une photographie et n’a pas besoin de cela. Si l’art doit sortir à l’identique plutôt qu’à peu près, rendez plutôt en PNG — son encodeur est sans perte.

Souvent. Si le dessin est un logo, une icône ou une illustration simple destinés à une page web que vous contrôlez, le SVG est en général plus petit que n’importe quel raster, net à tous les zooms sur tous les écrans, et recolorable depuis le CSS sans produire un second fichier.

Convertissez quand quelque chose refuse le SVG, et il y a des cas : les images d’aperçu pour les réseaux sociaux doivent être en PNG ou en JPG à des dimensions fixes, les clients de messagerie sont peu fiables, beaucoup de formulaires refusent le format sans autre forme de procès, et des plateformes qui acceptent les téléversements le refusent souvent pour des raisons de sécurité — un SVG est du XML et peut contenir des scripts. Ce sont des contraintes réelles, et c’est la raison d’être de cette page plutôt qu’une préférence générale pour les pixels.

Les icônes viennent en jeux, pas seules. Déposez tout le dossier : chaque fichier est rendu à tour de rôle à l’échelle que vous avez choisie, garde son nom avec l’extension échangée, et tout revient dans un seul ZIP prêt à verser dans une compilation.

Deux habitudes maintiennent la cohérence. Rendez toutes les icônes à la même échelle plutôt qu’à l’œil, pour qu’un jeu ait l’air délibéré d’un coup d’œil. Et gardez les SVG en contrôle de version en tant que source — régénérer le jeu entier à une nouvelle taille coûte alors une passe plutôt qu’un nouveau dessin.

Le rendu se fait dans l’onglet du navigateur sur votre propre processeur. Rien n’est téléversé, si bien qu’il n’y a pas de file d’attente, pas de quota journalier, pas de compte — et aucun tiers ne se retrouve à détenir vos éléments de marque non publiés, ce qui est une préoccupation plus fréquente pour des logos que pour la plupart des fichiers.

Cela signifie aussi qu’un dossier de deux cents icônes se convertit aussi vite que votre machine peut les dessiner, plutôt qu’aussi vite qu’elles peuvent être téléversées puis récupérées.

Quel que soit le format raster produit, le SVG d’origine reste la source. Il est malléable à toutes les tailles, recolorable depuis le CSS, et chaque futur raster est généré à partir de lui. Reconvertir le WebP en PNG plus tard ne récupère pas ce qui n’a jamais été rendu.

La pratique utile est de garder le SVG en contrôle de version à côté des rasters qu’on en a tirés. Un changement de marque, un nouveau contexte, un export à une autre taille : c’est une passe sur le SVG et non une redessin. Les WebP, eux, ne sont que des instantanés.