5568 sujets

Sémantique web et HTML

[résolu] SVG sur FF

bonjour!

j'ai fait un dessin sous illustrator que j'ai exporté en html+SVG, la page fonctionne sur IE en utilisant le fameux plugin d'adobe, mais je n'arrive pas à faire fonctionner l'image sur FF en utilisant le dernier exemple de ce lien :
http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro-3.html
j'ai mis le code de l'image dans la balise SVG. Voici ce code :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 width="24" height="533" viewBox="5911 5756.9 24 533" enable-background="new 5911 5756.9 24 533" xml:space="preserve">
<defs>
</defs>
<rect display="none" fill="#7D314C" width="10624" height="10560"/>
<path fill="#57B8D6" d="M5914,5789c0,0-5.8-9.4,1.8-12.5C5915.8,5776.5,5924.7,5780.5,5914,5789z"/>
<path fill="#57B8D6" d="M5925,6283c0,0.6-0.4,1-1,1s-1-0.4-1-1l0.1-511.3c0,0-0.1-3-0.1-3.7c0-0.2,0-0.5,0-0.7
	c-2.4-0.9-6.4-2.1-7.5,0c-0.7,1.2,0,2.9,0.5,4.6c0.4,1.2,0.9,2.5,0.9,3.7c0-0.6-0.4-1-1-1s-1,0.4-1,1c0-0.9-0.4-1.9-0.8-3.1
	c-0.7-2-1.5-4.3-0.4-6.2c1-1.7,3.4-3.3,9.4-1.1c0.2-2.6,0.9-5.2,2.6-6.6c1.3-1.1,3.1-1.4,5.2-0.9c1.3,0.3,2.3,1.3,2.8,2.8
	c0.7,2,0.2,4.3-1.1,5.8s-5.1,1.9-7.6,1.5c0,0.1,0,0.1,0,0.2c0,0.8,0.1,3.8,0.1,3.8L5925,6283z"/>
<path fill="#57B8D6" d="M5925,6278.1c-0.2-2.6-2.2-4.6-4.7-4.6c-2.5,0-4.5,2-4.7,4.6v0c0,0,5.2,11.6,8.5,11.6
	c3.3,0,8.5-11.6,8.5-11.6v0c-0.2-2.6-2.2-4.6-4.7-4.6c-2.5,0-4.5,2-4.7,4.6"/>
</svg>


Comment faire fonctionner le SVG dans FF avec le code ci-dessus ? Smiley biggrin
Modifié par ChrisG (27 Jun 2007 - 00:42)
Salut,

Pour encapsuler du svg j'utilise la syntaxe suivante :

<object type="image/svg+xml" data="fichier.svg" width="200" height="49">
	<object type="image/png" data="fichier.png" width="200" height="49">
		<p>Le texte qui remplace l'image…</p>
	</object>
</object>


Exemple sur mon blog.

Il y a juste un petit problème : IE6 affiche le fichier svg ET le fichier png*, en plus avec d'affreuses bordures. Dans IE7 c'est bon. À la limite tu fais sauter le fichier png et c'est bon. Smiley cligne



*Si quelqu'un a une idée du pourquoi, je suis preneur... Smiley sweatdrop
Modifié par Patidou (26 Jun 2007 - 11:01)
Patidou a écrit :

*Si quelqu'un a une idée du pourquoi, je suis preneur... Smiley sweatdrop


Hum... Parce qu'il manque la syntaxe qui va bien, celle avec les commentaires conditionnels ? je dis ça comme ça, moi, hein... Smiley ravi
Merci smile

et si on veut mettre le code SVG (donc XML) directement dans la page avec le code suivant pourquoi ça marche pas ?

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

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

<head><title>SVG within XHTML Demo</title> </head>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">

ici le code de mon image

</svg>

</body>

</html>

Modifié par ChrisG (26 Jun 2007 - 11:28)
Laurent Denis a écrit :


Hum... Parce qu'il manque la syntaxe qui va bien, celle avec les commentaires conditionnels ? je dis ça comme ça, moi, hein... Smiley ravi


Tu veux dire cette méthode adaptée au SVG?
ChrisG a écrit :
Merci Smiley smile

et si on veut mettre le code SVG (donc XML) directement dans la page avec le code suivant pourquoi ça marche pas ?


<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head><title>SVG within XHTML Demo</title> </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">
ici le code de mon image
</svg>
</body>
</html>


Parce que ton fichier est servi en tant que text/html et non pas en tant que application/xhtml+xml, et du coup il est traité comme du bête HTML qu'on ne peut pas mixer avec autre chose (dont le SVG). En plus le doctype n'est pas bon, il devrait être du type XHTML+SVG, je crois.
Modifié par Lanza (26 Jun 2007 - 11:31)
Lanza a écrit :


Parce que ton fichier est servi en tant que text/html et non pas en tant que application/xhtml+xml, et du coup il est traité comme du bête HTML qu'on ne peut pas mixer avec autre chose (dont le SVG). En plus le doctype n'est pas bon, il devrait être du type XHTML+SVG, je crois.


+1

Tu peux utiliser Amaya pour ça, tu crée une page vide et comme il dispose d'un mini éditeur svg, tu verras les doctypes à utiliser.

P.S. : pour servir les pages xhtml en tant que application/xhtml+xml sans se prendre la tête, sur certains configurations il suffit de renommer le fichier en .xhtml.
Modifié par Patidou (26 Jun 2007 - 11:55)
Lanza a écrit :


Parce que ton fichier est servi en tant que text/html et non pas en tant que application/xhtml+xml, et du coup il est traité comme du bête HTML qu'on ne peut pas mixer avec autre chose (dont le SVG). En plus le doctype n'est pas bon, il devrait être du type XHTML+SVG, je crois.


ok merci, mais pourquoi l'exemple 3-3 du site affiche bien le SVG sur FF alors qu'avec le code de mon image ça marche pas ?
ChrisG a écrit :


ok merci, mais pourquoi l'exemple 3-3 du site affiche bien le SVG sur FF alors qu'avec le code de mon image ça marche pas ?


Cet svg est intégré dans une page xhtml et servi en tant que application/xhtml+xml, c'est la même chose pour ton svg? Tu ne pourrais pas nous montrer ton exemple en ligne? Ça serait plus facile… Smiley cligne
Modifié par Patidou (26 Jun 2007 - 22:53)
re Smiley lol

bon en fait il fallait mettre en xhtml ou xml déjà, et en fait j'ai vu que ce qui déconne avec le code SVG de l'image (erreur : "Erreur d'analyse XML : entité non définie") c'est du à la propriété
xmlns:xlink="&ns_xlink;"
, si celle-ci est enlevée, ça fonctionne, je sais pas à quoi elle sers mais je vais chercher, j'avoue que je suis déçu car j'ai pas trouvé beaucoup de docs sur la balise <SVG>
Modifié par ChrisG (27 Jun 2007 - 00:05)
Sujet clos
Aller à