Appendice J : La minimisation de la taille des fichiers SVG
Cet appendice est informatif, non normatif.
Des efforts considérables ont été consentis pour rentre la taille des fichiers SVG aussi petite que
possible, tout en conservant les bénéfices de XML et en obtenant une compatibilité et un effet de levier
avec les autres spécifications du W3C.
Voici quelques fonctionnalités de SVG qui favorisent l'obtention de fichiers de petite taille :
- La définition des données de tracé de SVG a été conçue pour produire
un flux de données compact pour les données des graphiques vectoriels : toutes les commandes se résument
à un caractère ; on dispose de coordonnées relatives ; les caractères de séparation ne sont
pas obligatoires quand l'identification des jetons est implicite ; on dispose de formules de lissage de courbe (courbes de
Bézier cubique et quadratique et arcs elliptiques) pour ne pas nécessiter de
décomposition en plusieurs segments ; il existe des formulations raccourcies pour les formes courantes
de segments de Bézier cubique et quadratique et de segments de droite horizontaux et
verticaux, ce qui induit la spécification d'un nombre minimum de coordonnées ;
- On peut spécifier un texte en utilisant des données textuelles XML - aucun besoin de convertir en contours ;
- SVG offre une facilité pour définir des symboles en une fois et les appeler plusieurs fois en utilisant
différents attributs visuels et différents taille, positionnement, rognage et effets de filtre côté
client ;
- Les agents utilisateurs, qui gèrent le style avec CSS, peuvent
employer les sélecteurs CSS et l'héritage de propriété pour définir en une fois des jeux
d'attributs couramment utilisés comme styles nommés ;
- Les effets de filtre permettent des résultats visuels et des effets captivants que l'on ne trouve typiquement que
dans les outils d'édition graphique, ceci en utilisant une petite quantité de données vectorielles et/ou
pixélisés.
En complément, le protocole HTTP/1.1 permet la transmission de données compressées du serveur au client,
ce qui peut entraîner une réduction significative de la taille du fichier. Voici un échantillon de
résultats obtenus avec une compression gzip sur des documents SVG :
Document SVG
non compressé |
Compressé
avec gzip |
Taux de
compression |
12,912 |
2,463 |
81% |
12,164 |
2,553 |
79% |
11,613 |
2,617 |
77% |
18,689 |
4,077 |
78% |
13,024 |
2,041 |
84% |
Une question en relation est le rendu progressif. Certains visionneurs SVG vont gérer :
- la possibilité d'afficher les premières parties de fragments de document SVG, alors que le reste du
document est en cours de téléchargement du serveur ; ainsi, l'utilisateur pourra voir immédiatement
une partie du dessin SVG et y interagir, même si le fichier SVG est de grande taille ;
- le téléchargement d'images et de polices retardé. Tout comme certains navigateurs HTML, certains
visionneurs SVG vont tarder à télécharger des images et des
PolicesWeb vf., leur substituant une image temporaire et
des polices système, respectivement, juqu'à tant que l'image et/ou la police soit disponible.
Voici des techniques pour minimiser la taille des fichiers SVG et pour réduire la duré après laquelle
l'utilisateur peut commencer à interagir avec les fragments de document SVG :
- Construire le fichier SVG de façon à ce que tous les liens, que l'utilisateur est susceptible de vouloir
cliquer, se trouvent au début du fichier SVG ;
- Utiliser autant que possible des valeurs par défaut plutôt que de définir toutes les valeurs
d'attribut et de propriété explicitement ;
- Tirer avantage des facilités offertes par la compacité des
données de tracé : utiliser des coordonnées relatives ; utiliser
h et v pour des lignes horizontales et verticales ; utiliser, quand c'est possible, s ou t
pour les segments de Bézier cubique et quadratique ; éliminer les blancs et
les séparateurs superflus ;
- Utiliser des symboles si le même graphique apparaît plusieurs fois dans le document ;
- Pour ceux des agents utilisateurs, qui gèrent le style avec CSS, utiliser
l'héritage de propriété et les sélecteurs CSS pour consolider les propriétés
courammant utilisées en un style nommé ou pour assigner les propriétés à un élément
'g' parent ;
- Utiliser les effets de filtre pour aider à construire des graphiques via des opérations effectuées
côté client.