Format SVG : intégrer les éléments graphiques à votre site Web

En 1998, le World Wide Web Consortium (W3C) avait deux candidats potentiels pour le standard d’un langage de reconnaissance pour les graphiques vectoriels bidimensionnels basés sur XML : Microsoft et Macromedia (aujourd’hui Adobe Systems) proposaient le Vector Markup Language (VML), tandis que IBM, Adobe et d’autres présentaient Precision Graphics Markup Language (PGML). Cependant, le W3C a décidé de refuser les deux candidats, et proposa à la place de les fusionner. Le 4 septembre 2001, le résultat a été publié dans une recommandation sous le nom de Scalable Vector Graphics (SVG) 1.0 Specification. Cependant, le W3C n’a pas été en mesure de satisfaire toutes les personnes impliquées dans le projet, ainsi Microsoft a longtemps utilisé son propre langage VML dans ses applications comme Internet Explorer (jusqu’à la version 9), n’empêchant toutefois pas le succès du format SVG.

En 2001, dès que W3C a fait de Scalable Vector Graphics la spécification recommandée pour décrire les images et graphiques vectoriels bidimensionnels, le langage XML a été considéré comme la solution optimale pour afficher de tels éléments graphiques, même sous une forme animée. Cependant, comme les navigateurs de l’époque n’étaient pas encore adaptés au nouveau format SVG ou dans le cas d’Internet Explorer, refusaient de le supporter, des plugins externes tels qu’Adobe SVG Viewer ou Batik SVG Toolkit d’Apache étaient alors obligatoires pour pouvoir lire et afficher correctement les graphiques écrits en XML. L’alternative était pour le webmaster de fournir des fichiers graphiques PNG comme solution de secours.

Depuis que les navigateurs Web maitrisent HTML5, de telles mesures ne sont ainsi plus nécessaires : l’analyseur intégré à HTML5 permet d’intégrer des éléments SVG directement dans le code HTML sans spécifier l’espace de noms (namespace) XML, qui révèle généralement le contexte des éléments embarqués que peut interpréter le navigateur. Ceci élimine également le besoin d’un analyseur spécifique, comme mentionné plus haut.

Contrairement aux rasters et images matricielles, les images graphiques au format SVG sont généralement caractérisées par le fait qu’elles décrivent les différents objets graphiques d’une image d’un point de vue mathématique et ne s’intègrent pas dans une grille de pixels. Pour cette raison, Scalable Vector Graphics permet de mettre à l’échelle sans perte de qualité des formes géométriques, des icônes, des dessins techniques, des polices et des logos notamment et cela sans afficher d’effet escalier (crènelage) ou d’aliasing (repliement de spectre) qui peuvent être présents sur les éléments graphiques raster (image matricielle) ou apparaissent des pixels individuels. Pour en savoir plus sur les différences entre les images matricielles et les images vectorielles, consultez notre article sur ce sujet.

Avec le développement des navigateurs Internet, SVG a été de plus en plus fréquemment utilisé dans les documents HTML, de plus, le recours au Responsive Web Design (site Web adaptatif) a aussi joué un rôle. En effet, le fichier graphique vectoriel marque des points au niveau de la conception de projets Web cross-device et cross-display, surtout grâce à son excellente échelonnabilité. Cependant, ce n’est en aucun cas la seule raison pour laquelle l’utilisation du format SVG est recommandée pour la conception graphique d’un site Web, comme le prouve la liste suivante :

• Petite taille des fichiers : outre leur complexité, les fichiers graphiques SVG sont caractérisés par une très petite taille de fichier, même quand les graphiques sont agrandis. Ces fichiers fournissent ainsi une performance stable et rapide quel que soit l’appareil utilisé. Le temps de chargement des images qui en résulte affecte positivement le classement sur les moteurs de recherche.

• Open Source : le W3C a créé SVG en tant que standard gratuit, ce qui vous permet d’utiliser le langage sans restriction, sur plusieurs plateformes et en combinaison avec d’autres langages XML.

• Diverses options d’animations : les éléments SVG peuvent être animés de différentes manières. Pour cela, le langage du W3C : SMIL (Synchronized Multimedia Integration Language) est utilisé, mais son développement est désormais arrêté. En outre, SMIL n’a jamais été implémenté dans Internet Explorer et Edge et il se peut qu’il ne soit pas implémenté dans les futures versions de Chrome. Il est donc plus courant d’utiliser JavaScript pour les animations si vous souhaitez que les éléments SVG réagissent à des évènements comme les clics de l’utilisateur ou les mouvements de la souris. Une troisième option (plus restreinte) est l’utilisation des propriétés CSS « animation » et « motion-path », bien que celles-ci ne soient pas entièrement supportées par les navigateurs Web.

• Les fichiers SVG peuvent être formatés avec CSS : les graphiques au format SVG peuvent être manipulés avec le langage feuilles de style CSS. Tous les attributs de présentation tels que les couleurs, les filtres, la police et la taille de police peuvent être ajustés dans un fichier CSS séparé ou directement dans le SVG pour changer l’apparence du graphique.

• Forte compatibilité : le fait que les fonctions des différents analyseurs varient les unes des autres n’a que peu d’effet sur le rendu des graphiques, car le format SVG est à la fois compatible de manière ascendante et descendante (backward and downward compatible). Par conséquent, chaque navigateur affiche l’image correspondante en fonction de ses propres capacités et ignore les éléments XML inconnus sans provoquer de graves complications sur l’affichage.

• Sans barrière : les graphiques et images SVG sont basés sur du texte et donc lisibles par machine par les lecteurs d’écran et tous les appareils qui peuvent comprendre et lire le code source.

• Visible dans le code source : si le graphique SVG est marqué directement dans le document HTML, vous pouvez facilement l’ajuster dans l’éditeur de programme et modifier la couleur ou la taille de la police sans aucun détour par exemple.

Les avantages énumérés ci-dessus montrent qu’en tant que webmaster avancé, il est bien difficile de se passer du format SVG. Les nombreuses complications liées aux différents navigateurs, qui pendant de nombreuses années étaient des arguments décisifs contre son utilisation, sont désormais chose du passé. En effet, le format graphique semble ne représenter que des avantages au niveau de l’ergonomie, du référencement et de l‘accessibilité. Cependant tout n’est pas parfait avec le format SVG.

Un inconvénient majeur qui est associé aux images vectorielles, par exemple, est le choix limité de programmes. Bien que les images matricielles vous permettent de choisir librement parmi les programmes d’édition d’images standards, vous aurez besoin d’outils spécifiques comme Adobe Illustrator ou Inkscape, pour créer, enregistrer et convertir des fichiers SVG. Par conséquent, commencer à travailler avec des illustrations SVG est donc plus compliqué et demande plus de temps. On peut aussi mentionner les deux inconvénients suivants :

• Besoins élevés en ressources du client : HTML5 a résolu le problème des plugins nécessaires, mais a aussi déplacé le processus de rendu au niveau du navigateur. L’allégement de la charge sur le serveur et la petite taille des fichiers peuvent réduire les temps de chargement, mais cet avantage supposé s’accompagne aussi de problèmes. Si l’ordinateur de l’utilisateur ne dispose pas de la puissance de calcul nécessaire, des graphiques vectoriels complexes au format SVG peuvent rapidement conduire à un affichage différé de la page Web. Pour pallier à ce problème, vous devez optimiser le code SVG en supprimant les éléments inutiles.

• Possibilités d’application limitées : en raison de la technologie sous-jacente, SVG est la référence en matière de conception et de mise à l’échelle de graphiques, logos, polices de caractères, etc. En revanche, les illustrations complexes, qui peuvent également être éditées ultérieurement, ne peuvent être réalisées qu’à l’aide d’une structure complexe avec des surfaces clairement séparées. Le format SVG n’est pas en mesure de produire des graphismes photo-réalistes en raison du nombre limité de détails (profondeurs, ombres, effets de lumière etc.).

Par conséquent, si vous voulez utiliser des graphiques vectoriels au format SVG sur votre site Web, vous devez soit vous abstenir d’utiliser des fichiers graphiques très complexes, soit alors de les créer laborieusement avec des mesures minutieuses. Il est donc conseillé de n’utiliser les fichiers graphiques vectoriels que si vous avez besoin des forces de ce format. Si vous souhaitez afficher des images et des photos complexes, vous devez continuer à utiliser les formats matriciels bien connus.

Puisque le contenu SVG est balisé en XML, il est aussi soumis aux caractéristiques syntaxiques et de structure de tout document XML : le code est hiérarchique (forme arborescente) et contient des éléments et des attributs. Les éléments sont identifiés via des paires de balises qui commencent toujours par (<Tag-Name>) et se terminent par (</ Tag-Name>) ou par ce que l’on appelle des balises élément vide (empty element) (<Tag-Name />). Les attributs contiennent des informations supplémentaires sur les éléments et sont définis comme des paires de mots-clés dans une balise de début ou d’élément vide (<Tag-Name Attribut-Name="Attribute-value">). En outre, des instructions et des commentaires peuvent y être insérés. Chaque document SVG XML doit contenir exactement un élément au niveau supérieur (<svg>), en dessous duquel un nombre quelconque d’autres éléments peuvent être imbriqués. En option, vous pouvez utiliser la définition du type de document et la déclaration XML pour définir, entre autres, le type, la version et l’encodage des caractères du document sous-jacent.

Pour intégrer un tel graphique au format SVG dans un projet Web, vous n’avez plus besoin de plugins supplémentaires. Au lieu de cela, vous pouvez tout simplement intégrer les graphiques vectoriels directement dans le document HTML, en utilisant diverses options :

L’élément HTML, img, est le standard absolu pour intégrer des fichiers graphiques dans un site Web. En tant qu’élément autonome, il n‘a aucun contenu d‘élément et aucune balise de fin. En HTML, la barre oblique (/) est également omise. Ce type d’intégration fournit la syntaxe la plus courante, c’est pourquoi WordPress l’applique automatiquement aux graphiques SVG. Si la balise img est marquée avec une instruction CSS pour un design adaptatif, le graphique vectoriel s’adapte automatiquement aux différentes tailles d’affichage sans qu’aucun réglage supplémentaire ne soit alors nécessaire. Cependant, cette méthode d’implémentation ne vous permet pas de lier le graphique SVG à une URL ou à une application JavaScript. La ligne de code appropriée pour inclure SVG avec la balise image ressemble comme suit :

Avec la balise object, vous pouvez intégrer du contenu dans votre projet Web. Cette balise permet aux utilisateurs d’intégrer un large éventail d’éléments, y compris des applets Java, des films Flash, des diagrammes Excel, ainsi que des fichiers graphiques au format SVG. Contrairement à l’élément image, cette méthode d’implémentation vous permet d’inclure une solution de secours. Il peut s’agir d’un message texte ou d’un graphique matriciel qui est affiché au visiteur de votre site Web si le navigateur n’est pas en mesure de charger le fichier SVG. Vous pouvez aussi lier des formes dans le code source du fichier graphique et créer des animations avec JavaScript. Cependant, la méthode object est rarement supportée par les systèmes de gestion de contenu courants, ce qui rend son utilisation un peu compliquée. Le code pour l’intégration des SVG avec les balises object, y compris les graphiques de secours, est le même que dans l’exemple suivant :

Inline frame, plus connu sous le nom d’iFrame est disponible depuis HTML4 et il est désormais supporté par tous les navigateurs. Les Webmasters utilisent ces éléments principalement pour intégrer du contenu externe provenant d’autres sites Web comme les vidéos YouTube ou Google Maps notamment. Mais vous pouvez aussi présenter les fichiers SVG avec l’élément iFrame sur votre site Internet. Comme les éléments object, les iFrames permettent de lier des graphiques vectoriels avec JavaScript et de lier et définir une image ou un texte alternatif (de secours) si les graphiques SVG ne peuvent pas être chargés. Ils sont également applicables dans tous les domaines. Même si les systèmes de gestion de contenu communs supportent la technologie, l’utilisateur est pénalisé par un processus long lorsqu’il s’agit de créer un iFrame responsif. L’exemple suivant montre la structure générale d’un iFrame SVG, qui affiche un graphique PNG en cas de problème de compatibilité :

Vous pouvez intégrer une image SVG ainsi qu’une image matricielle comme image de fond via CSS. Vous bénéficiez de l’évolutivité sans perte associée au format SVG : l’arrière-plan SVG s’adapte automatiquement à la fenêtre de visualisation, c’est à dire à la zone d’affichage disponible de l’appareil concerné, tout en conservant la même qualité. Si vous avez une image vectorielle que vous souhaitez utiliser comme image de fond, il suffit simplement d’installer le div-Container correspondant :

Au lieu d’installer des éléments HTML qui se réfèrent à l’emplacement externe du fichier SVG, vous pouvez aussi inclure le graphique directement dans le code HTML, Pour ce faire, vous avez besoin de l‘élément HTML5 <svg> qui est réservé aux fichiers graphiques SVG. Ce SVG « inline » élimine le processus de chargement d’un fichier externe, tout en conservant les avantages de l’évolutivité via CSS et JavaScript. Vous pouvez aussi ajouter des liens vers ces graphiques intégrés. Cependant, la méthode présente aussi des inconvénients par rapport à l’intégration d’un fichier externe : si vous intégrez des SVG très complexes, votre document HTML perd alors de sa clarté du fait des lignes de code supplémentaires. Vous pouvez essayer de raccourcir le code autant que possible, mais en cas de doute, il est recommandé d’utiliser une variante avec un fichier SVG externe pour des fichiers graphiques très complexes. Enfin cette technique est aussi moins adaptée pour les graphiques qui apparaissent plusieurs fois dans une même page. 

Dans l’exemple suivant, nous fournissons un exemple d’une petite variante SVG pour intégrer le drapeau italien dans un framewrok HTML :

Pendant de nombreuses années, le format SVG a été considéré comme une alternative élégante et efficace aux formats matriciels comme PNG, JPEG ou GIF qui sont largement utilisés dans le développement Web, cependant il a aussi été associé à un effort de travail supplémentaire important. Cela s’explique principalement par le manque de support pour certains navigateurs populaires, en particulier Internet Explorer de Microsoft. Mais aujourd’hui un fichier SVG est généralement intégré aussi rapidement que n’importe quel autre fichier image. Pour de nombreux éléments visuels d’un projet Internet, les graphismes vectoriels sont un excellent choix. Et notamment performants pour les icônes, boutons, logos et polices de caractères responsifs, facilement adaptables à tout moment.

L’implémentation du format SVG peut être maitrisée même par les débutants en développement Web, grâce aux nombreuses variantes d’intégration et de fonctions du système de gestion de contenu. Cependant, la conception des formes vectorielles nécessite une bonne connaissance préalable. Non seulement les bons outils sont nécessaires, mais vous devez aussi avoir de l’expérience avec les vecteurs pour tirer le meilleur parti des fichiers graphiques de mise à l’échelle (scalabilité) sans perte. Mais avec un peu de détermination, il ne vous faudra pas longtemps pour commencer à récolter les fruits de ce format d’image qui répond parfaitement à des besoins graphiques légers.