[XHTML] SVG dans HTML

Version imprimable

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:

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...

20/03/2007, 16h27
Swoög

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.
20/03/2007, 16h52
MasterOfChakhaL

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...)
20/03/2007, 16h54
deY!

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.

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:

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:

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>

21/03/2007, 09h14
soli.f

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 ?
21/03/2007, 09h29
deY!

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

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:

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:

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>

21/03/2007, 10h36
soli.f

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