Attention : Le contenu de ces pages n'a pas été mis à jour depuis longtemps. Il est probablement obsolète pour Firefox 4.0/Gecko 4.0 et supérieur. Pour du contenu plus récent, allez consulter developer.mozilla.org.

Svg

SVG, pour Scalable Vector Graphics, est un langage XML pour faire des dessins vectoriels en 2D. C'est une recommandation du W3C.

Information sur l'implementation actuelle

On ne peut faire du SVG nativement que depuis Firefox 1.5 (pour les versions précédentes, Mozilla 1.7 ou Firefox 1.0, il faut recompiler avec l'option svg).

Pour le moment, Firefox 1.5 implémente SVG 1.1 en partie seulement. Vous pouvez lire cette page sur devmo pour savoir ce que vous pouvez utiliser ou pas dans Firefox 1.5 en SVG. (voir le tableau en fin de page notament).

Autres liens utiles :

suivre les évolutions de l'implémentation : http://weblogs.mozillazine.org/tor/
la page officielle du projet svg dans gecko avec sa page de l'avancée de l'implémentation dans la version de développement de Firefox.

Voir les news de xulfr :

Utilisation du SVG dans Firefox

SVG n'est pas inclus dans Firefox sous forme de plugin, mais est inclus au coeur même du moteur de rendu de Firefox, au même titre que l'est XHTML, MathML, XUL... Il n'est pas comparable par exemple au plugin d'adobe.

De par cette différence, vous pouvez utiliser SVG de différentes façon :

vous pouvez inclure du SVG directement dans une page XHTML (ou XUL). Avoir donc du XHTML et du SVG dans un même fichier. Cette utilisation prendra tout son sens quand on pourra utiliser la balise foreignObject dans Firefox 3.0 ;-)
vous pouvez inclure un fichier externe SVG avec les balises embed, object ou iframe.

Dans le cas d'un fichier externe, le serveur doit envoyer le bon type mime au navigateur, c'est à dire image/svg+xml, quand il vous envoi du SVG.

Si l'image s'affiche mal ou pas du tout : # Vérifiez que le SVG est activé dans Firefox (voir plus loin) # Vérifiez le type envoyé par le serveur : tapez directement l'url du fichier SVG dans la barre d'adresse du navigateur, et aprés affichage, cliquez droit sur la page, choisissez "informations sur la page", et le type envoyé apparait dans la boite de dialogue. # Dans le cas d'un svg embarqué dans du xhtml ou xul, vérifiez que les espaces de noms du svg sont bien déclarés.

Vous pouvez désactiver l'affichage du SVG dans Firefox (pour utiliser un plugin SVG comme celui d'adobe) en allant dans about:config . Cherchez alors svg.enabled et double cliquez dessus pour mettre à false.

Apprendre le SVG

Vous pouvez aller lire des articles sur http://svgfr.org/ . Attention, vu que SVG n'est pas complet dans Firefox, il se peut qu'il y ait des choses compliquées qui ne fonctionne pas. Autres sites : http://svground.free.fr/ http://www.orvinfait.fr/svg/index.html

Quelques ressources sur SVG dans Gecko:

http://www.croczilla.com/svg/samples/ : ce site présente les possibilités de l'implémentation actuelle de SVG dans Gecko. On y découvre ainsi ce qu'on peut faire en terme d'animation (conjointement avec javascript), mais aussi en terme d'interaction (manipuler des élements SVG à la souris via des bindings XBL)
mozdraw, une petite application web de dessin vectoriel, utilisant SVG.
Pas à pas, comment créer une horloge en SVG
L'interface DOM du SVG
Demo : mettez la lune en orbite http://isthis4real.com/orbit.xml
Demo : dessiner avec une tortue (pour les nostalgiques de "logo" ;-)) (http://www.fragmentarisch.net/svg/drawin(..))

foreignObject

foreignObject est une balise SVG qui permet d'inclure dans un SVG tout autre élément d'un autre namespace : des bouts de html, des bouts de XUL etc. Il existe une implémentation partielle de cette balise dans Gecko, mais elle n'est pas activée dans Firefox 1.5. Il faudra attendre Firefox 3.0 (Gecko 1.9) pour pouvoir l'utiliser.

Vous pouvez toutefois la tester en compilant Firefox 1.5 avec les options suivantes :

editer le fichier configure.in dans les sources de FF
décommentez la section conçernant foreignObject (faire une recherche, c'est vers la ligne 4935
lancer autoconf
dans le mozconfig, ajoutez ac_add_options --enable-svg-foreignobject

Voir les liens suivant pour en savoir plus sur la compilation de foreignObject :

Sinon, pour en savoir plus sur foreignObject :

Le contenu de cette page est disponible selon certaines conditions de réutilisation.
Cette page du wiki n'est pas éditable. Le système wiki n'étant plus fonctionnel.