Le SVG
Les interaction avec d'autres formats
Comme nous venons de le voir, le SVG peut intéragir avec de l'ECMAScript, et à des balises en commun avec le SMIL. Mais ce ne sont pas là ses seules intéractions.
Le SVG + Le SVG
Le premier point à savoir est qu'il est possible d'intégrer un fragment SVG dans un autre. Il existe plusieurs moyen pour y parvenir.
D'abord, la balise image, dont l'attribut href accepte aussi bien le jpg, le png et le svg. On peut aussi utiliser la balise use, qui permet d'inclure un fragment SVG dans un autre, ou simplement une partie de ce fragment. Pour préciser quelle partie nous interesse, il suffit de l'appeller par son id. exemple : "monsvg.svg#monid".
Le SVG + Le CSS
Le CSS permet de séparer le fond de la forme, où dans le cas d'un SVG, la forme et de son rendu. On peut le déclarer de deux manières différentes, soit au sein du même fichier, soit en deux fichiers séparés.
En un seul fichier
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px">
<defs>
<style>
<![CDATA[
#monrect {
fill: #ffcc00;
stroke: #ff9900;
stroke-width: 2px;
}
]]>
</style>
</defs>
<rect id="monrect" x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px"/>
</svg>
Si votre navigateur est compatible, vous devriez voir l'image ci-dessous.
En deux fichiers
Le CSS :
#monrect {
fill: #ffcc00;
stroke: #ff9900;
stroke-width: 2px;
}
Le SVG :
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="../css/cssrect2.css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <rect id="monrect" x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px"/> </svg>
Si votre navigateur est compatible, vous devriez voir l'image ci-dessous.
Le SVG et le XSL/T (ou le XSL/FO)
SVG étant une application de XML, on peut tout naturellement s'en servir au travers de XSL/T ou XSL/FO. Une application qui pourrait être interessante serait la génération à la volée d'image SVG provenant d'un export d'une base de données en XML.
Admettons que l'on ai dans une base de données des informations sur les achats/ventes de fruits et legumes. Bien que les chiffres soit parlant, un graphique l'ai généralement bien plus. Il suffirait alors d'extraire en XML l'ensemble des données, de passer cet XML à un filtre XSL/T pour obtenir un joli graphe. Ce processus serait alors facilement automatisable.
Un exemple d'XML :
<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="./stat.xsl"?> <stats> <produit name="Pomme" value="70" color="red"/> <produit name="Poire" value="90" color="orange"/> <produit name="Ananas" value="40" color="yellow"/> <produit name="Noix de coco" value="15" color="green"/> </stats>
Un XSL/T associé :
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<svg width="300px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Statistique des ventes</title>
<desc>Graphique montrant le ratio achat/vente</desc>
<g transform="translate(50, 110) scale(1,-1)">
<text><xsl:value-of select="@value"/></text>
<xsl:for-each select="/stats/produit">
<xsl:variable name="i" select="position()"/>
<rect x="{$i*30}" y="0" width="20" height="{@value}" fill="{@color}" stroke="black"/>
</xsl:for-each>
</g>
<xsl:for-each select="/stats/produit">
<xsl:variable name="i" select="position()"/>
<g transform="translate({$i*30+65},120) rotate(-45)" >
<text text-anchor="end"><xsl:value-of select="@name"/></text>
</g>
</xsl:for-each>
</svg>
</xsl:template>
</xsl:stylesheet>
Si votre navigateur est compatible, vous devriez voir l'image ci-dessous.