Sommaire

Comment intégrer une image SVG dans un document (X)HTML ?

HTML + SVG

Lorsqu'on veut générer dynamiquement du SVG, par exemple pour afficher automatiquement une courbe, le plus simple est de l'intégrer dans une page XHTML.

En effet, le HTML ne permet pas d'inclure dans le code de la page un code supplémentaire. Il faut générer le fichier SVG à part et l'importer ensuite dans le fichier grâce à la balise embed :


<html>

<head>

<title>Un exemple de graphique SVG</title>

</head>



<body bgcolor="#ffffff">

<div align="center">

<embed src="graph1.svg" width="1200" height="1500" type="image/svg+xml"/>

</div>



</body>

</html>

ou avec la balise object :


<html>

<head>

<title>Un exemple de graphique SVG</title>

</head>



<body bgcolor="#ffffff">

<div align="center">

<object data="graph1.svg" width="1200" height="1500" type="image/svg+xml"/>

</div>



</body>

</html>

Ce qui implique qu'il faut générer le SVG à part à l'aide d'un programme externe, soit un processeur XSLT, soit un script quelconque (shell, perl, PHP, etc.)

XHTML + SVG

Cependant, grâce au XHTML il est possible d'intégrer directement le code SVG dans le code de la page, évitant ainsi du coup la génération d'un fichier à part :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="fr" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Un exemple de SVG dans une page XHTML</title>

<link rel="stylesheet" type="text/css" href="moncss.css"/>

<meta content="application/xhtml+xml; charset=iso-8859-1" http-equiv="content-type"/>

</head>

<body>

<h1>Un exemple de SVG dans une page XHTML</h1>

<svg width="1200px" height="1000px" viewbox="0 0 1200 1000" xmlns="http://www.w3.org/2000/svg">



<!-- insérez le code SVG ici -->



</svg>

</body>

</html>

Remarque

Un fichier XHTML contenant du SVG peut ne pas être interprété correctement si l'extension du fichier est html. Pour compenser ce problème, choisissez une autre extension : xml ou xhtml.

XSL/XHTML+SVG : le SVG dynamique

modèles

Maintenant que le SVG peut directement être intégré dans une page XHTML pour l'affichage, rien n'empêche de générer cette page dynamiquement, y compris le SVG, grâce à une feuille de style (XSL) :


<?xml version="1.0" encoding="iso-8859-1" ?>

<xsl:stylesheet 

version="1.0" 

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:svg="http://www.w3.org/2000/svg">



<xsl:output 

method="html" 

doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" 

doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

indent="yes"

encoding="iso-8859-1"/>





<xsl:template match="/">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title>Un exemple de SVG dynamique</title>

<link rel="stylesheet" type="text/css" href="moncss.css"/>

<meta content="application/xhtml+xml; charset=iso-8859-1" http-equiv="content-type"/>

</head>



<body>



<h1>Un exemple de SVG dynamique</h1>



<svg:svg width="1200px" height="1000px" viewbox="0 0 1200 1000">

<!-- insérez votre code ici -->



</svg:svg>

</body>

</html>

</xsl:template>



<!-- insérez les autres templates ici -->



</xsl:stylesheet>

Il ne reste plus qu'à compléter avec le code xhtml, svg, et xsl...

Il suffira ensuite de créer le fichier XML qui va bien, faisant appel à cette feuille de style pour voir s'afficher une belle image.

Remarque

Dans les exemples présentés, le SVG inséré a une taille fixe et définie à l'avance.

Cependant, il peut être parfois nécessaire de paramétrer la taille de l'image et en la récupérant par une variable (locale ou globales). Dans ce cas, cette notation ne fonctionne pas car le xmlns="http://www.w3.org/2000/svg" va provoquer une erreur. Il faut déplacer cette définition dans <xsl:stylesheet ..., mais dans ce cas, chaque élément SVG sera précédé de svg: :

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg">

Et l'on peut supprimer les xmlns de la balise svg.

voir un exemple ici.

exemple

Nous voulons insérer l'image dynamique suivante :

Il s'agit d'une image reproduire des étiquettes de classe Ademe concernant la consommation ou l'émission.

Cette image est définie dynamiquement par un XSLT qui prend en paramètre la dimension de l'image ainsi que la valeur de la mesure (A,B, C...).