Format SVG : intégrer les éléments gra­phiques à votre site Web

En 1998, le World Wide Web Con­sor­tium (W3C) avait deux candidats po­ten­tiels pour le standard d’un langage de re­con­nais­sance pour les gra­phiques vec­to­riels bi­di­men­sion­nels basés sur XML : Microsoft et Ma­cro­me­dia (aujourd’hui Adobe Systems) pro­po­saient le Vector Markup Language (VML), tandis que IBM, Adobe et d’autres pré­sen­taient 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 re­com­man­da­tion sous le nom de Scalable Vector Graphics (SVG) 1.0 Spe­ci­fi­ca­tion. Cependant, le W3C n’a pas été en mesure de sa­tis­faire toutes les personnes im­pli­quées dans le projet, ainsi Microsoft a longtemps utilisé son propre langage VML dans ses ap­pli­ca­tions 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é­ci­fi­ca­tion re­com­man­dée pour décrire les images et gra­phiques vec­to­riels bi­di­men­sion­nels, le langage XML a été considéré comme la solution optimale pour afficher de tels éléments gra­phiques, même sous une forme animée. Cependant, comme les na­vi­ga­teurs de l’époque n’étaient pas encore adaptés au nouveau format SVG ou dans le cas d’Internet Explorer, re­fu­saient de le supporter, des plugins externes tels qu’Adobe SVG Viewer ou Batik SVG Toolkit d’Apache étaient alors obli­ga­toires pour pouvoir lire et afficher cor­rec­te­ment les gra­phiques écrits en XML. L’al­ter­na­tive était pour le webmaster de fournir des fichiers gra­phiques PNG comme solution de secours. Depuis que les na­vi­ga­teurs Web mai­tri­sent HTML5, de telles mesures ne sont ainsi plus né­ces­saires : l’analyseur intégré à HTML5 permet d’intégrer des éléments SVG di­rec­te­ment dans le code HTML sans spécifier l’espace de noms (namespace) XML, qui révèle gé­né­ra­le­ment le contexte des éléments embarqués que peut in­ter­pré­ter le na­vi­ga­teur. Ceci élimine également le besoin d’un analyseur spé­ci­fique, comme mentionné plus haut. Con­trai­re­ment aux rasters et images ma­tri­cielles, les images gra­phiques au format SVG sont gé­né­ra­le­ment ca­rac­té­ri­sées par le fait qu’elles décrivent les dif­fé­rents objets gra­phiques d’une image d’un point de vue ma­thé­ma­tique 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éo­mé­triques, des icônes, des dessins tech­niques, des polices et des logos notamment et cela sans afficher d’effet escalier (crènelage) ou d’aliasing (re­plie­ment de spectre) qui peuvent être présents sur les éléments gra­phiques raster (image ma­tri­cielle) ou ap­pa­rais­sent des pixels in­di­vi­duels. Pour en savoir plus sur les dif­fé­rences entre les images ma­tri­cielles et les images vec­to­rielles, consultez notre article sur ce sujet.

Avec le dé­ve­lop­pe­ment des na­vi­ga­teurs Internet, SVG a été de plus en plus fré­quem­ment utilisé dans les documents HTML, de plus, le recours au Res­pon­sive Web Design (site Web adaptatif) a aussi joué un rôle. En effet, le fichier graphique vectoriel marque des points au niveau de la con­cep­tion de projets Web cross-device et cross-display, surtout grâce à son ex­cel­lente éche­lon­na­bi­lité. Cependant, ce n’est en aucun cas la seule raison pour laquelle l’uti­li­sa­tion du format SVG est re­com­man­dée pour la con­cep­tion graphique d’un site Web, comme le prouve la liste suivante :

• Petite taille des fichiers : outre leur com­plexité, les fichiers gra­phiques SVG sont ca­rac­té­ri­sés par une très petite taille de fichier, même quand les gra­phiques sont agrandis. Ces fichiers four­nis­sent ainsi une per­for­mance stable et rapide quel que soit l’appareil utilisé. Le temps de char­ge­ment des images qui en résulte affecte po­si­ti­ve­ment le clas­se­ment 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 res­tric­tion, sur plusieurs pla­te­formes et en com­bi­nai­son avec d’autres langages XML.

• Diverses options d’ani­ma­tions : les éléments SVG peuvent être animés de dif­fé­rentes manières. Pour cela, le langage du W3C : SMIL (Syn­chro­ni­zed Mul­ti­me­dia In­te­gra­tion Language) est utilisé, mais son dé­ve­lop­pe­ment est désormais arrêté. En outre, SMIL n’a jamais été im­plé­menté dans Internet Explorer et Edge et il se peut qu’il ne soit pas im­plé­menté dans les futures versions de Chrome. Il est donc plus courant d’utiliser Ja­vaS­cript pour les ani­ma­tions si vous souhaitez que les éléments SVG réa­gis­sent à des évè­ne­ments comme les clics de l’uti­li­sa­teur ou les mou­ve­ments de la souris. Une troisième option (plus res­treinte) est l’uti­li­sa­tion des pro­prié­tés CSS « animation » et « motion-path », bien que celles-ci ne soient pas en­tiè­re­ment sup­por­tées par les na­vi­ga­teurs Web.

• Les fichiers SVG peuvent être formatés avec CSS : les gra­phiques au format SVG peuvent être manipulés avec le langage feuilles de style CSS. Tous les attributs de pré­sen­ta­tion tels que les couleurs, les filtres, la police et la taille de police peuvent être ajustés dans un fichier CSS séparé ou di­rec­te­ment dans le SVG pour changer l’apparence du graphique.

• Forte com­pa­ti­bi­lité : le fait que les fonctions des dif­fé­rents ana­ly­seurs varient les unes des autres n’a que peu d’effet sur le rendu des gra­phiques, car le format SVG est à la fois com­pa­tible de manière as­cen­dante et des­cen­dante (backward and downward com­pa­tible). Par con­sé­quent, chaque na­vi­ga­teur affiche l’image cor­res­pon­dante en fonction de ses propres capacités et ignore les éléments XML inconnus sans provoquer de graves com­pli­ca­tions sur l’affichage.

• Sans barrière : les gra­phiques 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 com­prendre et lire le code source.

• Visible dans le code source : si le graphique SVG est marqué di­rec­te­ment dans le document HTML, vous pouvez fa­ci­le­ment 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 nom­breuses com­pli­ca­tions liées aux dif­fé­rents na­vi­ga­teurs, qui pendant de nom­breuses années étaient des arguments décisifs contre son uti­li­sa­tion, sont désormais chose du passé. En effet, le format graphique semble ne re­pré­sen­ter que des avantages au niveau de l’ergonomie, du ré­fé­ren­ce­ment et de l‘ac­ces­si­bi­lité. Cependant tout n’est pas parfait avec le format SVG. Un in­con­vé­nient majeur qui est associé aux images vec­to­rielles, par exemple, est le choix limité de pro­grammes. Bien que les images ma­tri­cielles vous per­met­tent de choisir librement parmi les pro­grammes d’édition d’images standards, vous aurez besoin d’outils spé­ci­fiques comme Adobe Il­lus­tra­tor ou Inkscape, pour créer, en­re­gis­trer et convertir des fichiers SVG. Par con­sé­quent, commencer à tra­vail­ler avec des il­lus­tra­tions SVG est donc plus compliqué et demande plus de temps. On peut aussi men­tion­ner les deux in­con­vé­nients suivants :

• Besoins élevés en res­sources du client : HTML5 a résolu le problème des plugins né­ces­saires, mais a aussi déplacé le processus de rendu au niveau du na­vi­ga­teur. L’al­lé­ge­ment de la charge sur le serveur et la petite taille des fichiers peuvent réduire les temps de char­ge­ment, mais cet avantage supposé s’ac­com­pagne aussi de problèmes. Si l’or­di­na­teur de l’uti­li­sa­teur ne dispose pas de la puissance de calcul né­ces­saire, des gra­phiques vec­to­riels complexes au format SVG peuvent ra­pi­de­ment conduire à un affichage différé de la page Web. Pour pallier à ce problème, vous devez optimiser le code SVG en sup­pri­mant les éléments inutiles.

• Pos­si­bi­li­tés d’ap­pli­ca­tion limitées : en raison de la tech­no­lo­gie sous-jacente, SVG est la référence en matière de con­cep­tion et de mise à l’échelle de gra­phiques, logos, polices de ca­rac­tères, etc. En revanche, les il­lus­tra­tions complexes, qui peuvent également être éditées ul­té­rieu­re­ment, ne peuvent être réalisées qu’à l’aide d’une structure complexe avec des surfaces clai­re­ment séparées. Le format SVG n’est pas en mesure de produire des gra­phismes photo-réalistes en raison du nombre limité de détails (pro­fon­deurs, ombres, effets de lumière etc.).

Par con­sé­quent, si vous voulez utiliser des gra­phiques vec­to­riels au format SVG sur votre site Web, vous devez soit vous abstenir d’utiliser des fichiers gra­phiques très complexes, soit alors de les créer la­bo­rieu­se­ment avec des mesures mi­nu­tieuses. Il est donc conseillé de n’utiliser les fichiers gra­phiques vec­to­riels 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 ma­tri­ciels bien connus.

Puisque le contenu SVG est balisé en XML, il est aussi soumis aux ca­rac­té­ris­tiques syn­taxiques et de structure de tout document XML : le code est hié­rar­chique (forme ar­bo­res­cente) et contient des éléments et des attributs. Les éléments sont iden­ti­fiés via des paires de balises qui com­men­cent 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 con­tien­nent des in­for­ma­tions sup­plé­men­taires 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 ins­truc­tions et des com­men­taires peuvent y être insérés. Chaque document SVG XML doit contenir exac­te­ment un élément au niveau supérieur (<svg>), en dessous duquel un nombre quel­conque d’autres éléments peuvent être imbriqués. En option, vous pouvez utiliser la dé­fi­ni­tion du type de document et la dé­cla­ra­tion XML pour définir, entre autres, le type, la version et l’encodage des ca­rac­tè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 sup­plé­men­taires. Au lieu de cela, vous pouvez tout sim­ple­ment intégrer les gra­phiques vec­to­riels di­rec­te­ment dans le document HTML, en utilisant diverses options :

L’élément HTML, img, est le standard absolu pour intégrer des fichiers gra­phiques 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’in­té­gra­tion fournit la syntaxe la plus courante, c’est pourquoi WordPress l’applique au­to­ma­ti­que­ment aux gra­phiques SVG. Si la balise img est marquée avec une ins­truc­tion CSS pour un design adaptatif, le graphique vectoriel s’adapte au­to­ma­ti­que­ment aux dif­fé­rentes tailles d’affichage sans qu’aucun réglage sup­plé­men­taire ne soit alors né­ces­saire. Cependant, cette méthode d’im­plé­men­ta­tion ne vous permet pas de lier le graphique SVG à une URL ou à une ap­pli­ca­tion Ja­vaS­cript. La ligne de code ap­pro­prié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 uti­li­sa­teurs d’intégrer un large éventail d’éléments, y compris des applets Java, des films Flash, des dia­grammes Excel, ainsi que des fichiers gra­phiques au format SVG. Con­trai­re­ment à l’élément image, cette méthode d’im­plé­men­ta­tion 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 na­vi­ga­teur 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 ani­ma­tions avec Ja­vaS­cript. Cependant, la méthode object est rarement supportée par les systèmes de gestion de contenu courants, ce qui rend son uti­li­sa­tion un peu com­pli­quée. Le code pour l’in­té­gra­tion des SVG avec les balises object, y compris les gra­phiques de secours, est le même que dans l’exemple suivant :

Inline frame, plus connu sous le nom d’iFrame est dis­po­nible depuis HTML4 et il est désormais supporté par tous les na­vi­ga­teurs. Les Web­mas­ters utilisent ces éléments prin­ci­pa­le­ment 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 per­met­tent de lier des gra­phiques vec­to­riels avec Ja­vaS­cript et de lier et définir une image ou un texte al­ter­na­tif (de secours) si les gra­phiques SVG ne peuvent pas être chargés. Ils sont également ap­pli­cables dans tous les domaines. Même si les systèmes de gestion de contenu communs sup­por­tent la tech­no­lo­gie, l’uti­li­sa­teur 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 com­pa­ti­bi­lité :

Vous pouvez intégrer une image SVG ainsi qu’une image ma­tri­cielle comme image de fond via CSS. Vous bé­né­fi­ciez de l’évo­lu­ti­vité sans perte associée au format SVG : l’arrière-plan SVG s’adapte au­to­ma­ti­que­ment à la fenêtre de vi­sua­li­sa­tion, c’est à dire à la zone d’affichage dis­po­nible de l’appareil concerné, tout en con­ser­vant la même qualité. Si vous avez une image vec­to­rielle que vous souhaitez utiliser comme image de fond, il suffit sim­ple­ment d’installer le div-Container cor­res­pon­dant :

Au lieu d’installer des éléments HTML qui se réfèrent à l’em­pla­ce­ment externe du fichier SVG, vous pouvez aussi inclure le graphique di­rec­te­ment dans le code HTML, Pour ce faire, vous avez besoin de l‘élément HTML5 <svg> qui est réservé aux fichiers gra­phiques SVG. Ce SVG « inline » élimine le processus de char­ge­ment d’un fichier externe, tout en con­ser­vant les avantages de l’évo­lu­ti­vité via CSS et Ja­vaS­cript. Vous pouvez aussi ajouter des liens vers ces gra­phiques intégrés. Cependant, la méthode présente aussi des in­con­vé­nients par rapport à l’in­té­gra­tion 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 sup­plé­men­taires. Vous pouvez essayer de rac­cour­cir le code autant que possible, mais en cas de doute, il est re­com­mandé d’utiliser une variante avec un fichier SVG externe pour des fichiers gra­phiques très complexes. Enfin cette technique est aussi moins adaptée pour les gra­phiques qui ap­pa­rais­sent plusieurs fois dans une même page. 

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

Pendant de nom­breuses années, le format SVG a été considéré comme une al­ter­na­tive élégante et efficace aux formats ma­tri­ciels comme PNG, JPEG ou GIF qui sont largement utilisés dans le dé­ve­lop­pe­ment Web, cependant il a aussi été associé à un effort de travail sup­plé­men­taire important. Cela s’explique prin­ci­pa­le­ment par le manque de support pour certains na­vi­ga­teurs po­pu­laires, en par­ti­cu­lier Internet Explorer de Microsoft. Mais aujourd’hui un fichier SVG est gé­né­ra­le­ment intégré aussi ra­pi­de­ment que n’importe quel autre fichier image. Pour de nombreux éléments visuels d’un projet Internet, les gra­phismes vec­to­riels sont un excellent choix. Et notamment per­for­mants pour les icônes, boutons, logos et polices de ca­rac­tères res­pon­sifs, fa­ci­le­ment adap­tables à tout moment.

L’im­plé­men­ta­tion du format SVG peut être maitrisée même par les débutants en dé­ve­lop­pe­ment Web, grâce aux nom­breuses variantes d’in­té­gra­tion et de fonctions du système de gestion de contenu. Cependant, la con­cep­tion des formes vec­to­rielles nécessite une bonne con­nais­sance préalable. Non seulement les bons outils sont né­ces­saires, mais vous devez aussi avoir de l’ex­pé­rience avec les vecteurs pour tirer le meilleur parti des fichiers gra­phiques de mise à l’échelle (sca­la­bi­lité) sans perte. Mais avec un peu de dé­ter­mi­na­tion, il ne vous faudra pas longtemps pour commencer à récolter les fruits de ce format d’image qui répond par­fai­te­ment à des besoins gra­phiques légers.