Les graphiques vectoriels sont une méthode de communication d'une série de formes, de coordonnées et de tracés vers leur contexte de rendu. Il s'agit d'un ensemble d'instructions expliquant comment dessiner une image. Lorsque cette image est mise à l'échelle ou réduite, l'ensemble des points et des lignes qu'elle représente est redessiné pour mettre à l'échelle. Une courbe lisse entre deux points est redessinée de la même manière, quelle que soit la taille, de la même manière qu'une bordure définie par CSS sur un élément HTML est redessinée lorsque cet élément est mis à l'échelle dans la fenêtre d'affichage.
Scalable Vector Graphics (SVG) est un langage de balisage XML développé par le W3C. Il s'agit d'un format d'image vectorielle conçu pour le Web moderne.
Tout logiciel de conception dédié à la modification d'œuvres vectorielles vous permet d'exporter une image au format SVG. Toutefois, étant un langage de balisage lisible et standardisé, le format SVG peut également être créé et modifié avec n'importe quel éditeur de texte, quel que soit le logiciel utilisé pour le créer, bien que cela devienne rapidement irréaliste pour des images de toute complexité réelle. Le format SVG peut être stylisé avec CSS ou contenir du code JavaScript qui incorpore les comportements et les interactions dans les images elles-mêmes.
Même au-delà de l'intérêt évident des concepteurs et des développeurs, le format SVG est également un format incroyablement puissant en termes d'expérience utilisateur. Dans le cas des formes simples, les informations descriptives contenues dans une source SVG sont souvent très compactes par rapport aux informations basées sur une grille de pixels, plus prescriptives issues des formats d'image matricielle. Pour simplifier un peu trop, la différence entre "dessiner une ligne rouge d'1 px entre 1 x 1 et 1 x 5" et "1 x 1 est un pixel rouge" est plus simple. 1x2 est un pixel rouge. 1 x 3 est un pixel rouge. 1 x 4 est un pixel rouge. "1 x 5" est un pixel rouge." D'un autre côté, la nature descriptive du SVG nécessite plus d'interprétation, c'est-à-dire une plus grande "réflexion" de la part du navigateur. Pour cette raison, les fichiers SVG complexes peuvent être plus lourds à afficher. Dans la même veine, une image très complexe peut signifier un ensemble d'instructions détaillé et une taille de transfert importante.
Il peut s'écouler quelques essais et erreurs avant de pouvoir reconnaître instantanément une source d'image candidate comme étant mieux diffusée par SVG qu'un format matriciel traditionnel. Il y a toutefois quelques consignes: les éléments d'interface comme les icônes sont presque toujours bien adaptés au format SVG. Les œuvres d'art comportant des lignes nettes, des couleurs unies et des formes clairement définies seront probablement un candidat idéal pour le format SVG.
Le format SVG est un sujet de taille: un langage de balisage entier conçu pour coexister avec le HTML, avec des options et des fonctionnalités de style uniques. Pour une présentation plus détaillée du SVG, consultez le tutoriel MMDN SVG.