Integrer du SVG dans une page (X)HTML
J’ai réuni les informations concertant les méthodes pour integrer 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 recommendé 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 proné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éree pour palir à une defficience 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 defaut.
Si vous ne pouvez lire que l’image JPEG, vous pouvez recuperer 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 pourcet 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 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 preciser 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 language 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’executer 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 : pérsonnalisé
Et dans le cadre Canevas personnalisé :
Unités : px(taille du document donné en pixels)Largeur :Largeur en pixels sur la page webHauter :Largeur en pixels sur la page web
Evidement pour un document déstiné à l’impression il est plus interressant de donner en unitées métriques (mm par exemple).
De toute facon, cela ne fait en rien perdre les qualitées vectorielles du fichier. J’avourais 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]).
- Selectionner la sortie en mode
page
Normalement laTaille du bitmapdonnée par défaut, devrait être correcte. - Il est possible de donner la taille désirée dans le champ
Largeur - onner un nom au fichier dans le champ
Nom du fichier - Et enfin,
Exporter
Je vous conseille ensuite de passer par The Gimp ou Imagemagick pour recompresser le PNG, soit PNG, niveau 9 (sans perte de qualité, ou bien en JPEG.
Si l’image ne comporte pratiquement que des applats, il peut etre plus interressant de passer en mode indexé et de compresser en PNG, que de compresser en JPEG.
This entry was posted on Friday, August 12th, 2005 at 21:04 and is filed under Didacticiel, Inkscape, Réseau / Network / 网路, vectoriel. Find similar posts by selecting any of the following tags: . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
on 14 August 2005 at 10:26 yemanja wrote:
superbe le chien :))
on 15 August 2005 at 21:12 Administrator wrote:
Je n’ai pas osé appellé cette forme chien, même si ca y ressemble un peu :))
on 9 November 2007 at 10:40 faf2019 wrote:
Merci ça m’a bien dépanné pour le SVGZ… je m’arrachais les cheveux et la doc n’est pas courante sur le net.