Wikipédia:Atelier graphique/Didacticiels graphiques/Optimisation d'un fichier SVG

Un article de Wikipédia, l'encyclopédie libre.

Optimisation d’un fichier SVG
La taille d’un Svg est variable, tout dépend comment le fichier est conçu ainsi des SVG d’aspects similaires peuvent avoir une différence de poids importante.

Sommaire

[modifier] Explications

Un Fichier SVG est généré par un ensemble d’équations. Ces équations sont basées sur des points et des vecteurs. Par conséquent plus l’ensemble d’équation est important plus le fichier sera lourd. De même, si cet ensemble a de longues équations le fichier sera plus lourd que si elles sont courtes.

[modifier] Optimisations

Note : on parle d’optimisation, le but n’est pas de réduire au maximum le poids des images téléchargées, mais de:

  • simplifier au maximum la réédition du fichier
  • diminuer le temps de chargement d’une page comprenant le fichier

[modifier] Comment simplifier pour la réédition

  • Il ne faut pas mélanger les torchons et les serviettes, deux objets séparés restent des objets séparés. Ainsi sur l’image d’exemple, la loupe est autonome du logo.
  • il est utile de combiner ou hiérarchiser le fichier en groupes ainsi c’est plus facile de déplacer un ensemble de plusieurs objets (possibilité de nommer les groupes : clic droit propriété de l’objet, renommer l’Id ou dans l’éditeur XML).

[modifier] Comment réduire le poids d’un tel fichier

  • C’est un ensemble d’équations donc pour réduire la taille il suffit de factoriser !

Autrement dit : si plusieurs objets sont de même couleur à paramètres égaux (contour et remplissage de l’objet) il faut soit en faire une union, soit les combiner. (grouper ne simplifie pas)

  • Diminuer le nombre de points des objets :
  • Certaines fonctions, génèrent des points qui augmentent ainsi la taille du fichier final.

Quelques erreurs à éviter :

    • Ne pas oublier d’éventuels objets qui ne paraissent pas sur le dessin objets rendu invisible ou blanc
    • Ne pas redessiner un contour d’un objet, on peut le faire directement avec la fonction remplissage du contour et le rendu est similaire.

Lancez vous!