[XHTML] SVG dans HTML

**soli.f** · 20/03/2007, 16h19

Quelq'un saurait-il comment inclure du SVG dans du HTML sans passer par un IFRAME svp ? Je ne comprends pas pourquoi ce code ne fonctionne pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html xmlns:svg="http://www.w3.org/2000/svg">
	<body>
		<p>
			Paragraphe en HTML
		</p>
		<svg:svg width="100%" height="100%" viewBox="0 0 800 600" >
			<svg:rect x="100" y="100" width="400" height="250"/>
		</svg:svg>
	</body>
</html>

Je désespère...

**Swoög** · 20/03/2007, 16h27

La norme HTML (XHTML en fait dans ton cas) n'est pas prévu pour transporter du SVG, il faut donc un document SVG à part entière.

**MasterOfChakhaL** · 20/03/2007, 16h52

En fait, c'est plutot l'inverse. XHTML est fait pour être du XML, donc la théorie autorise l'utilisation des namespaces.

Tu peux jeter un oeil sur cette page
http://developer.mozilla.org/present...s/SVGDemo.xml?
explications

Si tu dois mettre un doctype, je pense que le mieux reste un doctype xhtml 1.1 (mais il y a obligation de le servir comme application/xhtml+xml, et ca IE n'aime pas du tout)
Sinon, essayer un doctype xhtml 1.0...

Le seul obstacle sera de toutes facons le support des navigateurs. Chez moi, ca marche avec FF2 et Opera9 mais pas IE6 (je n'ai aucun plugin installé en même temps...)

**deY!** · 20/03/2007, 16h54

Avec IE et ASV6 ça ne fonctionne pas.

Et pour le moment ASV à une meilleure implementation du SVG que FF j'ai donc tendance à m'orienté vers IE quand je fais du SVG... Mais j'ai hate qu'un meilleure gestion du svg se fasse.

**soli.f** · 21/03/2007, 08h39

Merci pour vos réponses, c'est sympa.
En cherchant sur le net, j'ai trouvé la réponse.
Sur Internet Explorer, il faut ajouter ces deux lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
    <?import namespace="svg" implementation="#AdobeSVG"?>

Voici un exemple pour être plus clair :

fichier svg_dans_html.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xml:lang="en">
  <head>
    <title>SVG dans une page HTML</title>
    <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
    <?import namespace="svg" implementation="#AdobeSVG"?>
  </head>
  <body>
    <h1>Une phrase en html</h1>
    <svg:svg width="300" height="200">
      <svg:circle cx="150" cy="100" r="50" />
      <svg:text x="30" y="20" >Une phrase en SVG</text>
    </svg:svg>    
  </body>
</html>

**soli.f** · 21/03/2007, 09h14

Pour mon message précédent, il faut remplacer </text> par </svg:text>. Je suis allé trop vite.
Par contre, j'aimerais désormais créer une page xhtml avec du svg en utilisant du xml et du xsl. Mais je n'y arrive pas. Mon bout de code svg n'est pas interpreté. Je dois avoir un problème de doctype ou de namespace.
Quelqu'un connait-il la réponse ?

**deY!** · 21/03/2007, 09h29

Ca ne fonctionne pas sur FF chez moi...
J'ai la version 2.0.0.2

**soli.f** · 21/03/2007, 10h35

C'est bon, cela fonctionne.
Pour ceux que ça intéresse, voici un exemple d'une page web comprenant du html et du svg par le biais de fichiers XML et XSL

fichier.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="fichier.xsl"?>
<racine>
	<phrase>
		Une phrase en SVG
	</phrase>
</racine>

fichier.xsl

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
<?xml version="1.0" encoding="iso-8859-1" ?>
 
<xsl:stylesheet version ="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:svg="http://www.w3.org/2000/svg" xml:lang="fr">
	<xsl:output method="xml" media-type="image/svg+xml"
	encoding="iso-8859-1" indent="yes"/>
 
	<xsl:template match="/">
		<html>
			<head>
				<title>
					SVG dans du XML/XSL
				</title>
				<object id="AdobeSVG" CLASSID="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2">
				</object>
				<xsl:processing-instruction name="import">
					namespace="svg" implementation="#AdobeSVG"
				</xsl:processing-instruction>	
			</head>
			<body>
				Test en XSL<br/>
				<svg:svg x="0" y="0" width="300" height="200">
					<svg:circle cx="150" cy="100" r="50" />
					<svg:text x="30" y="20" >
						<xsl:value-of select="racine/phrase"/>
					</svg:text>
				</svg:svg>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

**soli.f** · 21/03/2007, 10h36

j'ai oublié de dire que ces tests sont efféctués avec Internet Explorer et le viewer de Adobe pour le SVG.
je n'ai pas testé avec Firefox car je n'ai que IE à mon stage

[XHTML] SVG dans HTML

HTML

Discussions similaires

Partager

Partager