Ce que contient un fichier SVG
Un document SVG peut contenir trois sortes d'objets graphiques : des formes vectorielles, y compris des tracés faits de lignes droites et de courbes ; des images bitmap ; et du texte. Les objets peuvent être groupés, mis en style, transformés, et composés sur ce qui a déjà été dessiné. L'ensemble des fonctions comprend des transformations imbriquées, des tracés de détourage, des masques alpha, des effets de filtre et des objets modèles. Un dessin peut être interactif. L'animation peut s'écrire dans les éléments SVG eux-mêmes, ou dans un script qui atteint le modèle d'objets du document.
Le style est CSS. Le script est JavaScript. Le texte siège dans le document comme de vrais caractères, ce qui explique qu'un dessin puisse être cherché, et qu'un texte international, sens mélangés compris, soit un cas normal plutôt qu'un bricolage. La spécification vise le balisage vectoriel. Sa conception couvre aussi les tâches de base d'un langage de description de page, le genre de travail qu'assure PDF : assez d'information pour placer chaque glyphe et chaque image en un point choisi d'une page imprimée. CSS continue de le styler. Les deux faits voisinent plus aisément qu'on ne le croit. Un fichier peut être une image sur un site le lundi, et une figure dans un tirage le mardi, à partir du même texte.
La spécification SVG 1.1 s'organise en quatorze domaines fonctionnels. Ce qui suit range ces domaines dans un ordre de lecture, et non en une quatorzième copie des titres.
Tracés, formes et texte
Les tracés sont la façon compacte de décrire un contour. Un tracé peut être rempli, recevoir un trait, ou servir de frontière de détourage. Les commandes sont des lettres isolées. M signifie aller à, et il est suivi d'un x et d'un y. L signifie tracer une ligne jusqu'à. C, S, Q, T et A introduisent diverses courbes de Bézier et des courbes elliptiques. Z ferme le tracé. Une majuscule veut dire que les nombres qui suivent sont des coordonnées absolues. La même lettre en minuscule veut dire qu'ils sont relatifs au point courant. Toute la compacité est là. Un contour compliqué est une courte chaîne, pas une liste d'éléments XML avec une coordonnée dans chacun.
Les formes de base existent pour que les cas courants n'aient pas à s'écrire comme des tracés. Lignes droites, polylignes, polygones, cercles, ellipses, rectangles et rectangles à coins arrondis sont tous des éléments de plein droit. On peut construire chacun d'eux à partir d'un tracé. On ne devrait pas y être obligé.
Le texte est une donnée de caractères Unicode à l'intérieur du XML. Beaucoup d'effets visuels sont possibles. La spécification traite le texte bidirectionnel, de sorte qu'une suite d'anglais et une suite d'arabe peuvent partager une ligne, le texte vertical du genre employé pour le chinois ou le japonais, et le texte posé le long d'une courbe. La démonstration classique est une légende autour d'un sceau. La démonstration utile est une légende de schéma qui reste du texte, et que l'on peut copier, plutôt qu'une légende convertie en tracés et que l'on ne peut que regarder.
Peinture
Les formes peuvent être remplies et recevoir un trait, avec une couleur, un dégradé ou un motif. Un remplissage peut être opaque, ou transparent à n'importe quel degré. Les marqueurs sont des décorations aux sommets ou aux extrémités d'une ligne : les pointes de flèche sont le cas évident. La couleur se spécifie comme en CSS. Un nom tel que blue, une valeur hexadécimale courte ou longue, un triplet rgb() décimal, ou des pourcentages. Les dégradés peuvent être linéaires ou radiaux, compter autant de paliers que l'on veut, se répéter, et faire varier l'opacité aussi bien que la couleur. Les motifs sont bâtis à partir d'un objet matriciel ou vectoriel, et répétés selon x et selon y. Dégradés et motifs peuvent être animés et pilotés par script.
Depuis 2008, un débat de métier porte sur le point de savoir s'il faudrait ajouter des maillages de dégradé, ou des courbes de diffusion. Une représentation simple par courbes de diffusion peut tenir un ombrage subtil, et elle peut être captée automatiquement depuis une bitmap. Des artistes qui ont employé et les maillages et les courbes de diffusion ont trouvé les courbes plus simples à construire. Le brouillon de SVG 2 comprend les maillages de dégradé. Tant que les navigateurs ne les dessinent pas largement, la boîte à outils pratique reste la couleur unie, les dégradés linéaires et radiaux, et les motifs.
<rect x="16" y="28" width="90" height="70" fill="#2070e0"/>
<circle cx="160" cy="74" r="36" fill="#f07000"/>
<line x1="210" y1="30" x2="264" y2="122" stroke="#1858b8" stroke-width="4"/>Détourage, filtres et empilement
Les éléments graphiques, texte compris, peuvent définir un dedans et un dehors, et ces régions peuvent être peintes séparément. Des tracés de détourage entièrement opaques et des masques semi-transparents sont composés pour produire la couleur et l'opacité de chaque pixel de l'image finale, par mélange alpha. Un détourage dit ce qui est visible. Un masque dit à quel point c'est visible. On les confond facilement dans la conversation, et ce sont des éléments différents dans le fichier.
Un effet de filtre est une série d'opérations graphiques appliquées à un graphique source, qui produit une bitmap modifiée. La source peut rester vectorielle. La sortie filtrée est faite de pixels. Le flou est l'exemple que tout le monde a employé. Le mécanisme est plus général que le flou : une chaîne d'opérations, chacune prenant le résultat précédent. Les filtres sont aussi le moment où un « fichier vectoriel » devient discrètement une image matricielle pour une part de sa vie. On met la page à l'échelle, et les vecteurs se redessinent. Le filtre s'exécute de nouveau. C'est pourquoi un SVG flouté peut rester net quand un PNG flouté d'avance ne le peut pas, et pourquoi un filtre lourd n'est pas gratuit.
Interaction, liens, scripts, animation
Les images SVG peuvent répondre à un utilisateur de plusieurs façons. Outre les hyperliens, n'importe quelle partie d'un dessin peut écouter des événements d'interface : changements de focus, clics, défilement, zoom, et d'autres événements de pointeur, de clavier et de document. Un gestionnaire peut démarrer, arrêter ou modifier une animation, ou lancer un script. Les liens emploient XLink. Par un élément view ou un identificateur de fragment, une URL peut ouvrir un fichier SVG déjà zoomé sur une région, ou limité à un élément, ce qui est une façon pratique de bâtir une feuille de sprites à partir d'un seul dessin. Combiné à use, XLink permet aussi à un fichier de pointer vers un élément, en lui ou au-dehors, et de le réemployer. Moins de balisage, et une seule définition quand le signe doit changer.
Chaque partie du document peut être atteinte depuis un script, dans le même esprit que HTML. Il y a un objet du modèle objet du document pour chaque élément et chaque attribut. Les scripts vivent dans des éléments script et peuvent s'exécuter en réponse à des événements de pointeur, de clavier et de document. L'animation a ses propres éléments, animate, animateMotion et animateColor parmi eux, et elle peut aussi se faire en manipulant le document depuis un script cadencé. La conception de l'animation devait rester compatible avec SMIL, le Synchronized Multimedia Integration Language. Le W3C recommande explicitement SMIL comme norme pour l'animation en SVG. Les animations peuvent être continues, elles peuvent boucler, et elles peuvent répondre à l'utilisateur. Un dessin qui bouge est encore un dessin. Ce n'est pas automatiquement une bonne idée. Un mouvement qui redit la géométrie n'enseigne rien que le fichier immobile ne disait déjà.
Polices, métadonnées, réemploi
Le texte en SVG peut renvoyer à une police externe, y compris une police installée sur la machine. Si cette police manque là où le fichier est dessiné, le texte n'aura pas l'aspect prévu. Un remède, dans la spécification plus ancienne, est une police SVG : les glyphes définis dans le fichier et référencés depuis l'élément de texte. SVG 2 déplace ce travail vers WOFF. Le problème de fond ne bouge pas. Un dessin qui dépend d'une police que le lecteur n'a pas est un dessin qui sera substitué, et la substitution change les longueurs de ligne.
Les métadonnées entrent dans l'intérêt plus large du W3C pour la description. L'élément metadata peut porter des propriétés Dublin Core : titre, créateur, sujet, description. D'autres schémas sont permis. title et desc donnent une description en texte brut à l'intérieur de l'image, ce qui aide l'indexation et aide aussi un lecteur qui ne voit pas l'image. Un document peut définir une forme ou un dégradé une fois, et l'employer plusieurs fois. Il peut aussi inclure des images matricielles, PNG ou JPEG, et d'autres documents SVG. Le format est un dessin. Il est aussi une petite archive des pièces d'un dessin. Ce sont les navigateurs, les téléphones et les outils d'impression qui la servent.