comment finalement inclure du svg dans une page html

Version imprimable

bonjour,
je me questionne sur la meilleure façon d'inclure un svg dans une page html.
Je produis des graphiques avec le module perl ttgraph qui me donne ce genre de chose
http://leo.cuckoo.org/projects/SVG-T...t_expanded.svg
Comme il n'y avait pas d'exemple d'inclusion, j'ai pensé qu'il fallait extraire le noeud svg du document, le placer dans un xml et traiter le tout avec un xslt de ce type

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0"?>
  2 
  3 <xsl:stylesheet version="1.0" 
  4 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  5 xmlns="http://www.w3.org/2000/svg"
  6 xmlns:xlink="http://www.w3.org/1999/xlink"
  7 >
  8 <xsl:output
  9 method="xml"
 10 indent="yes"
 11 standalone="no"                 
 12 doctype-public="-//W3C//DTD SVG 1.0//EN"
 13 doctype-system="http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
 14 media-type="image/svg" />

ce qui fonctionne. Ensuite je me suis dit qui si j'avais besoin du svg ailleurs, j'étais marron. J'ai finalement fait un include

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</div>
                                <xsl:element name="svg">
                                <xsl:variable name="ad_a">///Users/mac/Produits/svg/</xsl:variable>
                                <xsl:variable name="ad_b">.xml</xsl:variable>
                                <xsl:variable name="adresseSvg" select="concat($ad_a,$nom_x,$ad_b)"/>
                                <xsl:attribute name="width">
                                <xsl:value-of select="document($adresseSvg)//glob/musique_svg/@width" />
                                </xsl:attribute>
                                <xsl:attribute name="height">
                                <xsl:value-of select="document($adresseSvg)//glob/musique_svg/@height" />
                                </xsl:attribute>
                                <xsl:attribute name="viewBox">
                                <xsl:value-of select="document($adresseSvg)//glob/musique_svg/@viewBox" />
                                </xsl:attribute>
                                <xsl:value-of select="document($adresseSvg)//glob/musique_svg" />
                                </xsl:element>
                                <div>

et maintenant je viens de voir qu'on peut tout simplement inclure le svg avec une balise image ou object
Ma question est : comment faut il faire finalement ?

01/11/2014, 18h01
thelvin

Mais comme tu veux, mec. Je vois juste pas l'intérêt de traiter les images SVG autrement que les images PNG ou JPEG.

Citation:

Envoyé par thelvin

Mais comme tu veux, mec. Je vois juste pas l'intérêt de traiter les images SVG autrement que les images PNG ou JPEG.

certes, merci pour la réponse, mais je viens d'essayer img et object et ça ne fonctionne pas, rien ne s'affiche sur l'ecran sous firefox

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<xsl:element name="img">
                        <xsl:variable name="ad_a">../image/</xsl:variable>
                        <xsl:variable name="ad_b">.svg</xsl:variable>
                        <xsl:attribute name="src"><xsl:value-of select="concat($ad_a,$nom_x,$ad_b)"/></xsl:attribute>
                        <xsl:attribute name="alt"><xsl:text>"</xsl:text><xsl:value-of select="$nom_x"/></xsl:attribute>
                        <xsl:attribute name="width">
                        <xsl:value-of select="x/musique_svg/@width" />
                        </xsl:attribute>
                        <xsl:attribute name="height">
                        <xsl:value-of select="x/musique_svg/@height" />
                        </xsl:attribute>
                        <xsl:attribute name="border">0</xsl:attribute>
                        </xsl:element>
 
                        <xsl:element name="object">
                        <xsl:attribute name="type">image/svg+xml</xsl:attribute>
                        <xsl:variable name="ad_a">../image/</xsl:variable>
                        <xsl:variable name="ad_b">.svg</xsl:variable>
                        <xsl:attribute name="src"><xsl:value-of select="concat($ad_a,$nom_x,$ad_b)"/></xsl:attribute>
                        <xsl:attribute name="alt"><xsl:text>"</xsl:text><xsl:value-of select="$nom_x"/></xsl:attribute>
                        <xsl:attribute name="width">
                        <xsl:value-of select="x/musique_svg/@width" />
                        </xsl:attribute>
                        <xsl:attribute name="height">
                        <xsl:value-of select="x/musique_svg/@height" />
                        </xsl:attribute>
                        <xsl:attribute name="border">0</xsl:attribute>

quelle serait la marche à suivre...?
le code source affiche ceci
<object type="image/svg+xml" src="../image/the_best.svg" alt=""the_best_madrik" width="800" height="400" border="0
et le lien pointe bien sur la bonne adresse .

01/11/2014, 21h22
thelvin

Citation:

Envoyé par vidici

certes, merci pour la réponse, mais je viens d'essayer img et object et ça ne fonctionne pas, rien ne s'affiche sur l'ecran sous firefox

Dans ce cas ça ne marcherait pas mieux avec autre chose que du SVG et tu t'es probablement planté dans le chemin ou le code. Montre-nous le code s'il te plaît.

Citation:

Envoyé par vidici

quelle serait la marche à suivre...?
le code source affiche ceci
<object type="image/svg+xml" src="../image/the_best.svg" alt=""the_best_madrik" width="800" height="400" border="0
et le lien pointe bien sur la bonne adresse .

Avec la balise <object> c'est l'attribut data, pas src. Mais bon, qui utilise <object> ? Pourquoi pas un simple <img> comme on a toujours affiché les images en HTML ?

... Et je suis curieux de savoir comment tu saurais si c'est la bonne adresse. À moins que je me trompe, l'image ne s'affiche pas, n'est-ce pas ? On sait que l'adresse est bonne quand l'image s'affiche, pas l'inverse.
01/11/2014, 21h37
vidici

Citation:

Envoyé par thelvin

... Et je suis curieux de savoir comment tu saurais si c'est la bonne adresse. À moins que je me trompe, l'image ne s'affiche pas, n'est-ce pas ? On sait que l'adresse est bonne quand l'image s'affiche, pas l'inverse.

Je sais que c'est la bonne adresse si quand j'ouvre le code source et que je clique sur lien, on m'affiche le code source du document svg en question.
le problème est donc ailleurs. probablement lié au document svg puisque l'auteur du module lui même n'a pas montré d'exemple d'inclusion.
Il y a un lien plus haut.
bonne soirée.
01/11/2014, 22h03
vidici

bon, c'est résolu.
il y avait bien un problème dans le document svg, mais c'était de ma faute.
j'ai changé le data dans le object -> il fonctionne
et img fonctionne aussi.
merci pour ta contribution