graphical blog 2

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.


bebete poilue

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) :

selectionner la taille en pixel dans pref. du docu.
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 web
  • Hauteur : 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.

exporter en mode page
Pour avoir l’équivalent de l’image en png, il suffit de faire Fichier=>Exporter en Bitmap ([Shift]+[Ctrl]+[E]).

  • Sélectionner la sortie en mode page
    Normalement la Taille du bitmap donnée par défaut, devrait être correcte.
  • Il est possible de donner la taille désirée dans le champ Largeur
  • Donner un nom au fichier dans le champ Nom du fichier
  • Et enfin, Exporter

Je vous conseille ensuite de passer par The Gimp, Imagemagick (ou mieux, Graphicsmagick) pour recompresser le PNG, soit PNG, niveau 9 (sans perte de qualité, ou bien en JPEG.
Si l’image ne comporte pratiquement que des aplats, il peut être plus intéressant de passer en mode indexé et de compresser en PNG, que de compresser en JPEG.

3 Comments »

  1. superbe le chien :))

    Comment by yemanja — %AM %476 %Africa/Abidjan%q, %2005 @ %0:%Aug %p

  2. Je n’ai pas osé appellé cette forme chien, même si ca y ressemble un peu :))

    Comment by Administrator — %PM %925 %Africa/Abidjan%q, %2005 @ %0:%Aug %p

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

    Comment by faf2019 — %AM %486 %Africa/Abidjan%q, %2007 @ %0:%Nov %p

RSS feed for comments on this post. TrackBack URL

Leave a comment

You must be logged in to post a comment.

Powered by WordPress

Switch to our mobile site