Comment préparer et optimiser des fichiers SVG pour le Web

Un SVG de logo qui pèse 400 kilo-octets pour trois traits et un mot n’est pas une fatalité, mais ce n’est pas non plus un problème de compression. Il y a deux leviers distincts pour préparer et optimiser des fichiers SVG pour le Web, et les confondre conduit à des fichiers toujours lourds, simplement mieux compressés.

L’Éditeur vectoriel produit le fichier SVG final ; c’est ensuite la page qui décide de son poids réel. Voici les deux leviers, dans l’ordre où il faut les tirer.

Deux leviers, pas un

Le premier levier est la réduction à la source : moins de nœuds, moins de décimales, moins de groupes inutiles dans le fichier. C’est là que se trouve l’essentiel du gain sur un dessin vectoriel.

Le second est la compression pendant le transport. Un serveur peut servir un SVG compressé en gzip, décrit par la RFC 1952, ou en Brotli, décrit par la RFC 7932. Le navigateur décompresse et affiche. Le rendu est strictement identique, et le gain dépend du contenu.

Les deux se cumulent, mais dans cet ordre. Compresser un fichier bavard ne remplace pas le fait de le nettoyer.

La précision des nombres

Les coordonnées SVG sont des nombres décimaux, et les outils de dessin en produisent souvent beaucoup plus que nécessaire. 12.3456 occupe sept caractères, 12.3 en occupe quatre. Trois octets gagnés par coordonnée, sur un dessin qui en compte deux mille, représentent environ six kilo-octets.

Sur un fichier unique, cela ne paraît pas décisif. Sur une page qui charge dix icônes, cela commence à compter.

La réduction de précision a un coût : la géométrie change légèrement. Sur une icône, l’écart est invisible. Sur une courbe longue et tendue, il peut produire une inflexion visible. Il faut donc vérifier visuellement après réduction, pas seulement consulter le poids.

Les images intégrées qui pèsent plus que tout

Un SVG peut contenir une image matricielle, encodée en base64 dans le fichier. Dans ce cas, la taille du SVG suit celle de l’image, et le nettoyage des tracés ne change presque rien.

Le diagnostic est simple. Si le fichier pèse plusieurs centaines de kilo-octets alors que le dessin comporte peu de formes, cherchez une image intégrée. La sortie consiste à l’externaliser, à la remplacer par un format plus adapté, ou à assumer le poids parce que l’image est le sujet.

Métadonnées, calques et résidus d’export

Les outils de dessin laissent des traces : noms de calques, commentaires, identifiants générés, éléments masqués, styles non utilisés. Tout cela se retrouve dans le fichier livré et n’apporte rien au navigateur.

Il faut être précis sur ce point : l’éditeur ne prétend pas minimiser le fichier ni supprimer les métadonnées. Le nettoyage se fait par l’édition du document, en supprimant ce qui ne sert pas, puis par vérification du fichier exporté.

Le projet amont qualifie d’ailleurs sa version d’alpha. Un export destiné à la publication mérite donc un contrôle avant mise en ligne, pas après.

Un mot sur la provenance

Un SVG est du XML, et un SVG non fiable doit être assaini avant d’être inséré directement dans une page. Ce n’est pas une question de poids mais de risque, et cela concerne les fichiers reçus de l’extérieur, pas ceux que vous avez dessinés. La règle pratique est de traiter tout fichier externe comme un contenu à vérifier.

Un fichier, trois tailles

Un SVG d’icône sert à toutes les densités d’écran. Là où trois PNG de tailles différentes demandaient trois fichiers et trois requêtes, un seul SVG suffit. Le gain n’est pas seulement en octets : il est aussi dans la cohérence visuelle et dans la maintenance, puisqu’une correction se fait à un seul endroit.

Cette polyvalence a une contrepartie. Le fichier doit être propre, parce qu’il sera chargé dans tous les contextes, et une approximation de tracé se verra autant sur un écran dense que sur un grand format.

Avant de publier

Trois vérifications suffisent : le fichier s’ouvre correctement dans le navigateur, le rendu ne montre pas d’inflexion suspecte après réduction de précision, et le poids reste cohérent avec le contenu visible.

Pour la question de la taille d’affichage, qui n’est pas la même que celle du poids, voir comment redimensionner un SVG sans perdre en qualité. Et pour la prise en main de l’éditeur, comment modifier des fichiers SVG en ligne dans votre navigateur couvre la séquence complète.