4 septembre 2001

2 Les concepts


Contenu

2.1 L'explication de la dénomination : SVG

SVG correspond aux initiales de « Scalable Vector Graphics », une grammaire XML pour des graphiques stylisables, utilisable comme un espace de nommage XML.

Adaptable [N.d.T. Scalable]

Adaptable veut dire « qu'on peut augmenter ou diminuer uniformément ». En termes graphiques, adaptable signifie « qui ne se limite pas à une seule dimension fixe en pixels ». Pour le Web, adaptable signifie qu'une technologie donnée peut s'étendre à un grand nombre de fichiers, un grand nombre d'utilisateurs, une grande variété d'applications. SVG, qui est une technologie concernant les graphiques pour le Web, est adaptable dans les deux sens du mot.

Les graphiques SVG s'adaptent aux différentes résolutions d'affichage pour, par exemple, permettre qu'une sortie imprimée utilise la pleine résolution de l'imprimante ou qu'une sortie écran puisse s'afficher avec la même dimension sur des écrans ayant des résolutions différentes. Ce même graphique SVG peut être disposé avec différentes dimensions sur la même page Web et ré-employé avec encore des dimensions différentes sur d'autres pages. Les graphiques SVG peuvent être magnifiés pour montrer un détail ou pour aider ceux qui ont une vue faible.

Les graphiques SVG sont adaptables parce qu'un même contenu SVG peut être un graphique autonome, être référencé ou être inclus dans d'autres graphiques SVG, ce qui permet ainsi la construction d'une illustration complexe par tranche, éventuellement par plusieurs personnes. Les fonctionnalités des éléments 'symbol', 'marker' et 'font' favorisent la ré-utilisation de composants graphiques, maximisent les avantages de la mise en cache HTTP et évitent le besoin d'un registre centralisé de symboles approuvés.

Vectoriel [N.d.T. Vector]

Les graphiques vectoriels contiennent des objects géométriques tels que des droites ou des courbes. Ceci permet une plus grande souplesse en comparaison avec des formats seulement pixélisés (comme PNG et JPEG) qui doivent conserver l'information de chaque pixel du graphique. Typiquement, les formats vectoriels peuvent aussi intégrer des images pixélisées et combiner celles-ci avec une information vectorielle tels que des tracés de rognage pour produire une illustration complète ; SVG ne fait pas exception.

Comme tous les affichages modernes se fondent sur des pixélisations, la différence entre les graphiques seulement pixélisés et les graphiques vectoriels se ramène à la question de savoir où la pixélisation intervient, côté client pour les graphiques vectoriels et, à l'inverse, côté serveur pour ceux pixélisés. SVG offre un contrôle sur le processus de pixélisation, par exemple pour donner une illustration anti-crénelée, sans l'horrible crénelage typique des implémentations vectorielles de mauvaise qualité. SVG offre également des effets de filtre de pixel côté client, ainsi l'adoption d'un format vectoriel ne signifie pas la perte d'effets populaires comme l'ombre portée douce.

Graphiques

La plupart des grammaires XML existantes représentent soit une information textuelle, soit des données brutes telles que des informations financières. Ces grammaires n'offrent en général que des possibilités graphiques rudimentaires, souvent moindres que l'élément HTML 'img'. SVG comble une lacune dans cet univers en offrant une description riche et structurée des graphiques vectoriels et des graphiques mixtes vectoriels/pixélisés ; on peut l'utiliser de façon autonome ou comme espace de nommage XML avec d'autres grammaires.

XML

XML, une recommandation du W3C vf. pour l'échange d'information structurée, est devenu très populaire, son implémentation est à la fois étendue et fiable. Étant écrit en XML, SVG est bâti sur cette fondation robuste et bénéficie de nombreux avantages comme une base solide pour l'internationalisation, des possibilités structurelles puissantes, un modèle objet, etc. En s'appuyant sur des spécifications existantes, proprement implémentées, les grammaires fondées sur XML restent ouvertes à l'implémentation sans nécessiter d'énormes efforts de ré-ingéniérie.

Espace de nommage

Un visionneur purement SVG, autonome, est certainement utile. Mais SVG est aussi destiné à être utilisé comme un des composants d'une application XML avec plusieurs espaces de nommage. Ceci multiplie la force de chacun des espaces de nommage employés et permet la création de contenus innovants. Par exemple, on peut incorporer des graphiques SVG dans un document qui utilise un espace de nommage XML orienté texte, tel que XHTML. Un document scientifique, par exemple, pourrait aussi utiliser MathML pour les formules mathématiques dans celui-ci. L'utilisation conjointe de SVG et de SMIL conduit à d'intéressantes présentations, graphiquement riches et fondées sur le temps.

SVG est un bon composant d'usage général pour toute grammaire de plusieurs espaces de nommage qui nécessite l'emploi de graphiques.

Stylisable

Les avantages des feuilles de style, en termes de contrôle de la présentation, de souplesse, de chargement plus rapide et de facilité de maintenance, sont maintenant bien admis, plus sûrement pour du texte. SVG étend ce contrôle au domaine des graphiques.

On qualifie souvent la combinaison des scripts, du DOM et de CSS de « HTML dynamique » et on utilise couramment une telle combinaison pour des effets d'animation, d'interactivité et de présentation. SVG permet une même manipulation, à partir de scripts, de l'arbre du document et de la feuille de style.

2.2 Les concepts SVG importants

Les objets graphiques

Avec toute grammaire XML, on doit faire attention à ce qui fait l'objet de la modélisation. Pour des formats textuels, la modélisation se fait en général au niveau des paragraphes et des phrases, plutôt qu'au niveau des noms, des adverbes ou des phonèmes. De la même manière, SVG modélise les graphiques au niveau des objets graphiques plutôt qu'au niveau de points individuels.

SVG propose un élément général 'path', qui peut être utilisé pour créer une grande variété d'objets graphiques et aussi pour offrir des formes de base courantes, comme les rectangles et les ellipses. Celles-ci, pratiques pour un codage manuel, peuvent être employées tout comme l'élément 'path', plus général. SVG offre un contrôle fin sur le système de coordonnées dans lequel les objets graphiques sont définis et sur les transformations qui seront appliquées lors du rendu.

Les symboles

SVG aurait pu inclure la définition de symboles standards. Mais lesquels ? Il y aurait toujours eu les symboles supplémentaires pour l'électronique, la cartographie, les schémas, etc. dont certaines personnes auraient eu besoin, qui n'auraient été fournis que dans la « prochaine version ». SVG permet aux utilisateurs de créer, de ré-utiliser et de partager leurs propres symboles sans faire appel à un registre centralisé. Les communautés d'utilisateurs peuvent créer et affiner les symboles dont elles ont besoin, sans interroger de comité. Les concepteurs peuvent avoir l'exacte certitude de l'aspect graphique des symboles qu'ils utilisent et ne pas se soucier de symboles non reconnus.

On peut employer les symboles dans différentes dimensions et orientations et les re-styler pour qu'ils correspondent avec le reste de la composition graphique.

Les effets de pixélisation

Plusieurs graphiques Web existants emploient les filtres offerts dans des applications de dessin pour créer des effets de flou, d'ombrage et de lumière et ainsi de suite. On aurait pu croire que, pour la pixélisation côté client utilisée par les formats vectoriels, de tels effets n'étaient pas possibles. SVG permet la spécification déclarative des filtres, utilisés seuls ou en conjonction, applicables côté client au moment du rendu. Ces filtres sont spécifiés de telle façon que les graphiques soient toujours adaptables et affichables dans différentes résolutions.

Les polices

Un matériel riche en graphiques est très souvent dépendant de la police employée et de l'espacement exact de ses glyphes. Dans de nombreux cas, les concepteurs convertissent le texte en une image pour éviter tout problème de substitution de police. Ce qui signifie que le texte original a disparu, au détriment de la capacité de recherche et de l'accessibilité. Pour répondre aux desiderata des concepteurs, SVG incorpore des éléments de police, préservant ainsi le texte et l'aspect graphique.

L'animation

On peut produire une animation via la manipulation du document à partir de scripts, mais les scripts sont difficiles à écrire et leur transposition entre les outils d'édition est plus compliquée. En réponse encore une fois à la communauté des concepteurs, SVG incorpore des éléments d'animation déclaratifs qui ont été conçus en collaboration par les Groupes de Travail SVG et SYMM. Ceci permet une expression en SVG des effets animés courants dans les graphiques Web existants.

2.3 Les options pour l'utilisation de SVG dans les pages Web

On peut inclure un contenu SVG dans une page Web de diverses manières. Voici quelques-unes des possibilités :