Tutoriel SVG avec HTML5

Introduction

Selon Wikipedia (récupéré le 25 mars 2014), “Le Scalable Vector Graphics (en français « graphique vectoriel adaptable1 »), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Ce format inspiré directement du VML et du PGML est spécifié par le World Wide Web Consortium depuis 1999.” “Les coordonnées, dimensions et structures des objets vectoriels sont indiquées sous forme numérique dans le document XML. Un système spécifique de style (CSS ou XSL) permet d’indiquer les couleurs et les polices de caractères à utiliser. Ce format gère quelques formes géométriques de base (rectangles, ellipses, etc.), mais aussi des chemins (paths), qui utilisent les courbes de Bézier et permettent ainsi d’obtenir presque n’importe quelle forme. Le remplissage peut se faire à l’aide de dégradés (gradients) de couleurs de motifs (pattern) qui sont des objets SVG quelconques, ou de filtres (appelés shaders en imagerie 3D). On peut également appliquer des motifs le long des chemins (markers) et utiliser les fonctions de remplissage. Le canal alpha, pour la transparence, est géré à tous les niveaux. Comme dans tout document XML, les objets sont organisés sous forme d’arbre. Le format permet l’intégration d’animations, ou la manipulation des objets graphiques par programmation, notamment grâce à des scripts qui peuvent être intégrés dans le SVG.”.

SVG fait partie de la spécification du HTML 5, c'est-à-dire que les tags SVG font partie intégrante du langage et peuvent être intégrés directement dans le document (inline). Cela fonctionne depuis Chrome 9 et 10, Firefox 4, Opera 11 et Internet Explorer 9 (février 2011). Bien que SVG ne soit pas encore totalement supporté, les grandes marques de navigateur (sauf IE9) offrent maintenant un très bon support. (cité de Daniel K. Schneider 19:47, 1 April 2012 (CEST))

Pour voir si votre navigateur est compatible avec SVG et HTML 5 (ce qui devrait être le cas si votre navigateur a moins d'un an), regardez sur le tableau de compatibilité disponible sur When can I use Inline SVG in HTML5? (caniuse.com).

Pour aller plus loin :

• Tutoriel SVG statique
• Tutoriel XSLT pour générer du SVG
• Tutoriel SVG dynamique avec SMIL
• Tutoriel SVG/SMIL animations interactives
• Tutoriel SVG dynamique avec DOM
• SVG (survol et liens)

Apprendre et réutiliser SVG

Apprendre SVG

La page SVG Links (en anglais) présente un certain nombre de liens intéressants. Toutefois, il est fortement conseillé de commencer avec le Tutoriel SVG statique.

Respectez la syntaxe de SVG :

Exemple minimal (non recommandé):

<svg xmlns="http://www.w3.org/2000/svg">
    <circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
</svg>

Code (à compléter pour les dessins) qui définit la taille du canevas SVG. Par défaut la hauteur et la largeur sont en pixel. Il est possible d'utiliser des cm, mm, etc.

<svg height="200" width="600" xmlns="http://www.w3.org/2000/svg">
      <!-- Des tags SVG ici ... -->
</svg>

Code (à compléter pour les dessins) pour permettre les liens (nécessaire pour les animations et les pages interactives !)

<svg height="6cm" width="10cm"> 
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
      <!-- Des tags SVG ici .... -->
</svg>

Si vous voulez tracer un bord, utilisez une propriété HTML CSS standard, par exemple :

<svg style="border-style:solid;border-width:1px;" id="circle" height="60" width="120" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
      <!-- Des tags SVG ici .... -->
  </svg>
</svg>

Nettoyer le SVG

C'est difficile. Vous pouvez tenter d'importer un fichier dans un éditeur SVG, faire vos modifications, puis l'enregistrer et l'intégrer à nouveau à votre document HTML. Jusqu'à présent aucun éditeur ne peut gérer le HTML5 avec SVG inclus.

Si votre fichier SVG ne s'affiche pas à cause d'erreurs de syntaxe, essayez le validateur de W3C, il vous donnera la liste des erreurs en indiquant à quelles lignes du code elles se trouvent. Il est aussi possible d'y envoyer un fichier HTML5 avec du SVG inclus. Faites attention d'avoir le bon doctype en haut : <!doctype html>

Copier des dessins Inkscape

Utiliser des dessins faits avec Inkscape demande souvent du travail supplémentaire car les coordonnées utilisées sont souvent étranges. La page Chapter 23. SVG and the Web (en anglais) fournit quelques conseils. En particulier, lisez Inkscape for the Web (toujours en anglais). Le conseil le plus important est de sauvegarder en SVG optimisé (Save as Optimzed SVG) qui ajoutera une viewbox si celle-ci est absente et ajustera la taille à 100%. L'image sera ainsi affichée en plein écran même si vous l'avez dessinée trop petite.

Suggestion de marche à suivre pour rendre un document Inkscape prêt pour le web :

1. ajuster la taille du document à la taille de l'image Menu File->Document Properties. Dans l'onglet "Custom size" ouvrir Resize page to content et cliquer sur Resize page to drawing or selection.
2. Enlever les DEFs inutilisées : File->Vacuum Defs.
3. Optimiser le SVG': File -> Save as... -> Optimized SVG. Sélectionner l'option "Enable viewboxing dans la boîte de dialogue. Ceci fait plusieurs choses, en particulier insérer une viewbox correcte et des attributs width et height.
4. Enlever le Inkscape/XML et SVG non-standard: File -> Save as... -> plain SVG

(cette opération va enlever les calques et autres informations spécifiques à Inkscape, conservez cependant une copie du fichier original, en cas de modifications nécessaires). Depuis janvier 2014, cela peut déclencher une erreur comme montré dans Using Inkscape for web animation (en anglais). Si cela se produit, rouvrez le fichier sauvegardé et tout rentrera dans l'ordre.

Encore une fois, considérez la possibilité de faire des copies de l'original avant de commencer. En effet, cette procédure peut rater, surtout si vous utilisez des SVG non-standard ! Vous pouvez également tenter de changer l'ordre des opérations, i.e. sauvegarder comme "plain SVG" avant d'optimiser.

images Openclipart.org

La plupart de ces dessins sont probablement fait avec Inkscape et mis à disposition "tels quels". Ils peuvent donc ne pas avoir étés nettoyés. Cependant, de nombreux dessins vont marcher très bien. De plus, quelques dessins SVG sur http://openclipart.org fonctionnent très bien pour l'import, par exemple coconut tree ne contient aucune extension propriétaire. Notez qu'elles ne sont pas interdites et que les navigateurs vont simplement les ignorer.

<?xml version="1.0"?>
  <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:dc="http://purl.org/dc/elements/1.1/" 
       xmlns:svg="http://www.w3.org/2000/svg" id="svg2" 
       viewBox="0 0 744.09 1052.4" version="1.1">
</svg>

Ce fichier ne contient pas d'extension Inkscape propriétaires. Il contient seulement quelques instructions supplémentaires utilisées pour inclure des méta-informations (description, copyright...). Ci-dessous, un fichier qui montre deux versions : originales et nettoyée. Il n'y a pas beaucoup de différence. Puisque nous n'avons pas retiré l'espace superflu autour du dessin, il apparait un peu plus petit.

Le voici :

• http://tecfa.unige.ch/guides/svg/ex/html5/inkscape-import/html5-import-with-img.html

Ainsi qu'un autre exemple :

• http://tecfa.unige.ch/guides/svg/ex/html5/inkscape-import/html5-import-with-img2.html

Comment inclure du SVG dans du HTML5

Il y a plusieurs façon d'inclure du SVG dans du HTML. La plus simple et la plus souvent utilisée est de l'inclure directement dans le document (inlining). Cependant, dès que le SVG devient complexe cela devient difficile car le fichier peut devenir très grand.

Ici nous allons simplement montrer comment inclure des images SVG qui sont de la bonne taille. Plus ou moins n'importe quel mécanisme d'inclusion va marcher :

• Copier/coller le code SVG à l'intérieur du code HTML (inlining)
• Utiliser le tag HTML img
• Utiliser le tag HTML object
• Utiliser le tag HTML iframe
• Utiliser du CSS (image en background)
• Inclure du SVG à l'intérieur d'un autre SVG avec le tag image.

Nous expliquerons plus bas comment adapter la taille de l'image SVG inclue.

Inlining

N'oubliez pas la déclaration (ou les déclarations) de namespace dans l'élément SVG de plus haut niveau. Au minimum xmlns="http://www.w3.org/2000/svg"

Exemple :

• circle.html (affichez la source)

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
  </head>

  <body>
    <h1>HTML5 SVG Demo</h1>

A nice green circle :
    <svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
    </svg>

    <hr>
    <address>Created by DKS. This is free code</address>
  </body>
</html>

Un exemple de SVG animé :

• circle-crawling.html (consultez le code source)

Remarque :

• On peut également importer du SVG en utilisant le tag "image". Cependant, cela est seulement possible normalement avec le SVG statique. Cette méthode est développée dans un chapitre suivant

Inclure du SVG avec le tag img

Ceci ne marche qu'avec du SVG statique. Utilisez le tag object ou l'élément image de SVG pour inclure des animations et/ou des éléments interactifs.

Exemple :

• html5-with-img-src.html

Voici les éléments les plus importants de cet exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <h1>HTML5 SVG Demo (embed with img src)</h1>

   <p> A nice green circle that was embeded using the img element:
   <img src="green-circle.svg" height="64" alt="Nice green circle"/>
</p>

Inclure du SVG avec le tag object

Permet d'inclure du SVG qui comprend des balises SMILE interactives.

Exemple statique :

• html5-with-object.html

Voici les éléments les plus importants de cet exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <h1>HTML5 SVG Demo (embed with object)</h1>

<p> A nice green circle that was embeded using the HTML "object" tag:
<object type="image/svg+xml" data="green-circle.svg" 
	width="64" height="64" border="1"></object>
</p>
</body>
</html>

Exemple qui contient une animation (observez la couleur des yeux des dragons)

• http://tecfa.unige.ch/guides/svg/ex/html5/animation/dragon-head-silhouette-anim.html

Inclure du SVG avec le tag iframe

Exemple :

• html5-with-iframe.html

Voici les éléments les plus importants de cet exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <h1>HTML5 SVG Demo (embed with iframe)</h1>

<p> A nice green circle that was embeded using the HTML "iframe" tag:
<iframe src="green-circle.svg" 
	width="64" height="64" style="border:1;"></iframe>
</p>
<p>
Tips:
<iframe src="green-circle.svg" style="float:left;margin-right:1cm;" 
	width="64" height="40" style="border:1;"></iframe>
</p>
</body>
</html>

Utiliser du SVG comme image de fond en HTML 5

Exemple :

• html5-with-css-background.html

Voici les éléments les plus importants de cet exemple

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/CSS">
      body {
      background-image: none, url('green-circle.svg');
      background-position: 50% 50%;
      background-repeat: no-repeat;
      }
    </style>
  </head>

  <body>
    <h1>HTML5 SVG Demo (embed with CSS background)</h1>

<p> A nice green circle that was embeded using CSS Background.
</p>
<p>Tips:</p>
<ul>
<li>SVG included as CSS can't be scripted and positioning is hard. Therefore only use this method for background illustrations.</li>
</ul>
</body>
</html>

Inclure du SVG via un élément SVG image

Assurez-vous que le SVG que vous incluez définisse bien sa taille en pourcentage ou que vous utilisez une viewbox.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>
  <body>
    <h1>HTML5 SVG Demo - embed svg file with SVG image</h1>

<p> A huge red circle that was embeded using the svg "image" tag:</p>
<svg id="circle" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image x="0" y="0" height="60" width="60"  xlink:href="huge-red-circle.svg" />
</svg>
</body>

• Exemple : import-with-svg-image.html

Adapter la taille et la position d'un graphique SVG

Il existe de nombreuses façons de faire cela :

• Utilisation de la balise img dans HTML
• Réaliser une transformation d'échelle dans le SVG
• Utilisation de la balise SVG image.

Utilisation de la balise img dans HTML

Notre méthode préférée pour le SVG statique consiste à munir le SVG original d'une viewbox et d'attributs de taille et de l'importer dans du HTML avec un tag img. Ainsi le SVG ressemblera à ça (voir plus bas pour comment faire avec Inkscape) :

<svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100%"
   height="100%"
   viewBox="0 0 684 648">

Vous pouvez maintenant simplement définir une taille dans le code HTML, par exemple :

<img src="coconut.svg" height="100" alt="Nice coconut tree"/>

Exemple : html5-import-with-img.html

Réaliser une transformation d'échelle dans le SVG

Pour commencer, il convient d'éditer le fichier SVG et d'ajouter le code "transform" suivant :

Juste après le tag svg ouvrant, ajouter :

  <g transform="scale(0.1)">

juste avant le tag svg fermant ajouter :

  </g>

Vous pouvez utiliser cette méthode à l'intérieur de vos graphiques SVG pour adapter la taille des différentes parties. Il suffit des les entourer avec g transform="scale(...).

Taux de réussite : cette méthode est garantie puisqu'elle repose sur du SVG de base. Cependant, il ne s'agit pas de la méthode la plus élégante puisqu'il faut éditer le fichier SVG d'origine.

Exemple : circle-scale.html, à comparer avec circle.html

Utilisation de la balise SVG image

Les méthodes suivantes sont simples à comprendre et devraient fonctionner dans tous les navigateurs.

La solution simple

Tout d'abord, un rappel sur l'utilisation de la balise image

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>
  <body>
    <h1>HTML5 SVG Demo - embed svg file with SVG image</h1>

<p> A huge red circle that was embeded using the svg "image" tag:</p>
<svg id="circle" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image x="0" y="0" height="60" width="60"  xlink:href="huge-red-circle.svg" />
</svg>
</body>

• Exemple import-with-svg-image.html

Ce que vous avez à faire:

• Prendre connaissance des proportions de l'image SVG originale (regardez l'élément svg racine du fichier SVG)
• Définir l'échelle : la hauteur et la largeur de l'image par rapport à vos besoins.

Dans notre exemple, les dimensions du graphique importé étaient 600 x 600 px. Afin d'obtenir un cercle de 10 fois plus petit, nous avons juste divisé x/10 et y/10.

• Si vous ne pouvez pas voir l'image, importez la photo dans sa taille originale et définissez la taille de canevas aux mêmes dimensions.

Par exemple si le canevas d'origine est 1000x400:

<svg id="circle" height="1000.7" width="400" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image x="0" y="0" height="1000.7" width="400"  xlink:href="huge-red-circle.svg" />
</svg>

Maintenant que vous savez que l'image et votre code sont corrects, vous pouvez essayer de comprendre pourquoi vous ne pouvez pas voir une image. En effet, il n'est pas garanti que cette méthode fonctionne avec tous les fichiers SVG , en particulier si l'image importée est "mal" placée. Voir la solution suivante. Utilisez une échelle si vous ne souhaitez pas apprendre à réparer cette sorte de problème du code de SVG importé. Illustrons avec un exemple. L'image like a Sir est placé dans un espace inapproprié comme vous pouvez voir dans la copie d'écran et le code suivants:

IMAGE MANQUANTE - à insérer par DKS

<g inkscape:label="Ebene 1" inkscape:groupmode="layer" id="layer1" transform="translate(445.66942,-924.04028)">

Solutions:

• Ouvrir le fichier SVG avec Inkscape et le corriger. De cette façon vous pourriez aussi vous débarrasser des espaces superflus (enregistrer sous "plain SVG"). Cependant, cette opération peut être difficile. Le graphique peut être dans une mauvaise position, parce que l'auteur a créé des "path" avec les données de "path" de SVG qui ne s'adaptent pas au système de coordonnée de x=0/y=0 "habituel".
• Utiliser une des méthodes ci-dessous qui consiste à importer l'image dans sa taille originale, puis la redimensionner à l'aide de l'échelle plus facile) ou en ajustant le ViewBox.

Bien sûr, vous pouvez bouger les images. Ci dessous, voici le code de l'image repositionnée :

<svg id="circle" height="62" width="62" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image x="1" y="1" height="60" width="60"  xlink:href="huge-red-circle.svg" />
</svg>

Importer l'image avec sa taille d'origine et faire une transformation d'échelle

Ci-dessous, on peut trouver une autre variante que la précédente, plus robuste pour les dessins pourvus de coordonnées inadéquates. Il faut ici importer le grand cercle avec sa taille d'origine, puis opérer une transformation d'échelle dessus.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>
  <body>
    <h1>HTML5 SVG Demo - embed svg file with SVG image</h1>

<p> A huge red circle that was embeded using the svg "image" tag plus a scale transform:</p>
<svg id="circle" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g transform="scale(0.1)">
    <image x="0" y="0" height="600" width="600" xlink:href="huge-red-circle.svg" />
  </g>
</svg>
</body>
</html>

Attention aux éléments suivants :

• Les valeurs de height et width du tag image doivent impérativement correspondre (plus ou moins) à la taille du SVG importé. Si ces attributs sont absents du fichier d'origine, ajoutez-les vous-même, si possible.
• Les valeurs de height et width du root tag SVG doivent à peu près correspondre à l'image redimensionnée. Par exemple, si vous importez un fichier de résolution 100x200 et le rendez deux fois plus grand, les dimensions contenues dans le root tag devraient être au moins de 200x400.
• Exemple : import-with-svg-image2
• Autre exemple : like_a_sir.html

Tirer parti de l'attribut viewBox

User de cette méthode ouvre un nombre infini de possibilités, mais l'usage de viewBox est difficile à saisir... Le code suivant montre comment changer les dimensions d'un SVG et le repositionner (en faisant remonter le viewport).

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <h1>HTML5 SVG Demo - embed svg file with SVG image and distort with viewBox</h1>

<p> A huge red circle that was embeded using the svg "image" tag plus a change of user coordinates with a a viewBox</p>
<svg style="border-style:solid;border-width:1px;" id="circle" height="60" width="120" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <svg viewBox="0 -300 600 1200" preserveAspectRatio="none" >
    <image x="0" y="0" height="600" width="600" xlink:href="huge-red-circle.svg" />
  </svg>
</svg>
</body>
</html>

Exemple : import-with-svg-image4

Créer du texte qui entoure une image SVG

Vous pouvez utiliser les propriétés habituelles de HTML et CSS pour définir le style des éléments SVG. Ainsi le code suivant alignera le SVG à droite :

<svg style="float:right" width="81" height="127" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Simple tree</title>
  <rect fill="#7f3f00" stroke="#000000" stroke-width="0" x="32.26172" y="50.26172" width="17" height="77" id="svg_3"/>
  <circle fill="#007f3f" stroke="#000000" stroke-width="0" cx="40.26172" cy="40.26172" r="40.26172" id="svg_1"/>
 </g>
</svg>

Celui-ci alignera le SVG à gauche et ajoutera une petite marge :

<svg width="43" height="65" style="float:left;margin:5px;" 
    xmlns="http://www.w3.org/2000/svg">
....
</svg>

Exemples (incluant quelques codes SVG longs) (regardez le code source) :

• text-with-pics.html
• (à faire : Créer une version qui utilise le tag image pour l'import)

Liens

Spécifications (lectures très techniques !)

• The image element (part of the Scalable Vector Graphics (SVG) 1.1 (Second Edition), W3C Recommendation 16 August 2011

• HTML5 A vocabulary and associated APIs for HTML and XHTML, W3C Working Draft 29 March 2012. Have a look at the chapter on Embedded content

ViewBox

• 7.7 The ‘viewBox’ attribute (SVG 1.1 Specification)
• SVG Viewport and View Box

Remarque : il manque l'insertion d'une image dans la section 4.3.1, qui figure dans la version anglaise de cette page.