Integrer du SVG dans une page (X)HTML
J’ai réuni les informations concertant les méthodes pour intégrer du SVG dans une page (X)HTML que j’avais toujours du mal a trouver, la méthode que l’on trouve habituellement est celle de adobe qui n’est pas recommandé par les standards et est plus limité que la standard.
Il faut cependant penser à adapter le document SVG à la taille désirée dans la page web.
Mauvaise méthode prônée par Adobe : tag <EMBED>
<HTML> <body> Mon texte <embed src="mon_image.svg" width="250" height="50" alt="logo4"> </body> </HTML>
Le problème de cette méthode est qu’elle n’est pas standard, et ne sera donc pas forcément reconnu par tous les navigateurs.
Méthode standard pour HTML et XHTML pronée par le W3C : tag <OBJET>
<HTML> <body> Mon texte <object type="image/svg+xml" data="mon_image.svg"> <img src="mon_image.png" alt="mon image"> </object > </body> </HTML>
Une image bitmap de remplacement est insérée pour palier à une déficience en SVG du navigateur. C’est généralement plus gros, mais ca permet de dépanner. Cela dit, tous les navigateurs sauf IE devrait d’ici quelques jours disposer de lecteur SVG (le fork gecko 1.8 à eu lieu aujourd’hui, qui annonce la proche sortie de Mozilla Firefox 1.1 qui supportera le SVG par défaut.
Si vous ne pouvez lire que l’image JPEG, vous pouvez récupérer le fichier SVGZ ici : http://popolon.org/gblog2/wp-content/upload/bete_poilue.svgz
Enfin, le SVG peut être sauvegarder en SVGZ (format compressé), cela permet de gagner beaucoup de place mais il faut dans ce cas ajouter le type mime sur le serveur.
et que le client supporte cela. C’est le cas pour cet exemple. Si le serveur n’est pas configuré pour, ce qui est le cas dans la majorité des cas, j’avais fait une « request feature » (demande de fonctionnalité) sur le gestionnaire de bug du projet HTTPD apache, cela a été refusé, pour cause de manque de clarté dans les specs du W3C.
Il est toujours possible si vous n’avez pas accès au fichier mime-type du serveur de préciser dans votre .htaccess :
AddType image/svg+xml svgz AddEncoding gzip svgz
Normalement le SVG doit déjà être géré, sinon vous pouvez également ajouter la ligne suivante :
AddType image/svg+xml svg
Une autre solution consiste a envoyé l’entête HTTP via un langage de script comme en PHP par exemple, en commençant votre script par :
<?php header('Content-type: image/svg+xml');
et si il s’agit d’un SVGZ, ajouter également :
header('Content-Encoding: gzip');
Penser a bien l’exécuter en première ligne, avant tout autre HTML ou PHP.
Voir la page SVG:MIMEType du wiki mozilla.org qui m’a servi de source.
Une chose importante la taille du document doit être précisé dans votre fichier SVG :
Sous Inkscape, il suffit à la création du document (ou à la fin, auquel cas vous risquez de devoir redimensionner votre image) :
Menu Fichier => Préférences du Document ([Shift]+[Ctrl]+[D])
Selectionner :
Taille du canevas : personnalisé
Et dans le cadre Canevas personnalisé :
Unités : px(taille du document donné en pixels)Largeur :Largeur en pixels sur la page webHauteur :Hauteur en pixels sur la page web
Évidement pour un document destiné à l’impression il est plus intéressant de donner en unités métriques (mm par exemple).
De toute façon, cela ne fait en rien perdre les qualités vectorielles du fichier. J’avouerais enfin, que je n’ai pas tenté d’impression de la page pour voir ce que cela donne, ne possédant pas (encore) d’imprimante fonctionnelle.
Pour avoir l’équivalent de l’image en png, il suffit de faire Fichier=>Exporter en Bitmap ([Shift]+[Ctrl]+[E]).
Page 1 of 2 | Next page