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

Optimisation d’un fichier SVG

Sur les autres projets Wikimedia :

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.

Explications modifier

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.

Optimisations modifier

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

Comment simplifier pour la réédition modifier

 
  • 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).

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

  • 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!