Tutoriel SVG avec HTML5

De EduTech Wiki
Aller à la navigation Aller à la recherche

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 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 à moins d'un an), regardez sur le tableau de compatibilité disponible sur When can I use Inline SVG in HTML5? à caniuse.com.

Poiur aller plus loin :

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.

Si vous voulez aller plus loin, utilisez:

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>

Exemple incomplet qui défini 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" with="600" xmlns="http://www.w3.org/2000/svg">
      <!-- Des tags SVG ici .... -->
</svg>

Exemple incomplet 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 et sauver de nouveau. 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 du W3C, il vous donnera la liste des erreurs en indiquant les lignes.

  • http://validator.w3.org/
  • 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 fait 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 (toutjours 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 un viewbox correct 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 une copie originale du fichier si besoin). Depuis janvier 2014, cela peut déclencher une erreur comme montré dans 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. 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 retirer l'espace supplémentaire autour du dessin, il apparait un peu plus petit.

Le voici :

Ainsi qu'un autre exemple :

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

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 : 

<!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é :

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.

Ecxemple :

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 (img tag)

Cela fonctionne seulement avec du SVG STATIC. Utilisez l'élément object ou l'élément img pour ajouter des animations et/ou des éléments interactifs.

Exemple :

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>

Inclure du SVG avec le tag iframe

Exemple :

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 :

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>

Adapter la taille et la position d'un graphique SVG

Il existe de nombreuses façon de faire cela.

  • 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

  • Notre seconde méthode préférée est d'importer le graphique SVG avec sa taille originale et de réaliser une transformation d'échelle (scale transform) comme expliqué plus bas.
  • Une troisième méthode consiste a "réparer" le SVG comme expliqué dans la section concernant Inkscape et d'utiliser un simple tag SVG image.
<svg id="sir" height="116" width="106"
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="1140" width="1040"  xlink:href="like_a_sir_original.svg"/>
</g>
</svg>

Utiliser l'attribut SVG transform pour changer la taille d'un graphique

Pour commencer, nous suggérons 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 :

Utiliser l'attribut SVG image pour importer et adapter un graphique SVG

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>

Ce que vous avez à faire:

  • Reprendre les 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, importer la photo dans sa taille originale et définir 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, s'il l'image importée est "mal" placée. Voir la solution suivante, utiliser 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 DSK 

<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 l'import de l'image avec 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>

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

Liens

Specifications (very technical reading !)
ViewBox


Remarque : il reste encore à voir l'utilisation du tag image de SVG pour faire l'inclusion, la version anglaise originale se trouve ici

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Tutoriel_SVG_avec_HTML5&oldid=49045 »