Ajout de SVG à une page Web

.NET Framework 3.0

Cette rubrique présente des méthodes courantes permettant d’afficher SVG dans votre page Web, en partant du principe que vous disposez des connaissances de base des langages HTML et JavaScript.

Introduction

Si vous venez de découvrir le format SVG (Scalable Vector Graphics) et que vous souhaitez tester cette technologie, vous devez probablement vous demander comment ajouter un rendu SVG à une page Web de base. Regardez un modèle de page Web relativement simple pour vous faire une première idée.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>My First SVG Page</title>
</head>

<body>
  <p>SVG to be inserted here.</p>
</body>

</html>

Il existe un grand nombre de méthodes permettant d’ajouter un rendu SVG à ce modèle de base. L’exemple ci-dessous vous présente une méthode simple.


<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
  <title> My First SVG Page</title>
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="200px" height="200px">
    <rect x="0" y="0" width="100%" height="100%"
          fill="none" stroke="black"/>
    <circle cx="100" cy="100" r="50"
            style="stroke: black; fill: red;"/>
  </svg>
</body>

</html>

Astuce  Pour améliorer la compatibilité entre les navigateurs modernes, enregistrez l’exemple de code ci-dessus avec l’extension de fichier xhtml. En changeant l’extension de fichier de html en xhtml, vous transformez le modèle HTML en document XHTML. C’est la raison pour laquelle la déclaration xml (la première ligne de l’exemple précédent) a été ajoutée et que l’élément meta a été commenté. Reportez-vous à la liste suivante pour plus d’informations sur l’exemple précédent.

<?xml version="1.0" encoding="utf-8" standalone="no"?>

La déclaration xml est une instruction de traitement de navigateur qui identifie le document comme étant de type XML/XHMTL. L’attribut de version requis indique la version de la norme XML à laquelle correspond le document XML. L’attribut encoding facultatif indique au navigateur comment interpréter les octets associés du document en fonction d’un jeu de caractères particulier (le codage par défaut est UTF-8). L’attribut standalone="no" facultatif indique que la définition de type de document (DTD) précisée dans l’élément DOCTYPE doit être utilisée pour plusieurs validations. Sachez que la spécification de l’élément standalone=”no” n’est en fait pas nécessaire. En effet, la valeur standalone=”no” est présupposée lorsqu’une déclaration de balise externe (DTD, dans notre cas de figure) est présente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Du point de vue technique, la déclaration DOCTYPE n’est pas un élément HTML. C’est est une instruction destinée au navigateur Web, qui décrit la version du langage de balisage dans lequel la page est écrite. La déclaration se rapporte à un fichier DTD qui spécifie les règles du langage de balisage pour permettre aux navigateurs d’afficher correctement le contenu. Le DOCTYPE vous permet aussi d’utiliser des validateurs de page. Dans ce cas, la DTD XHTML 1.0 Transitional active tous les éléments et attributs HTML, y compris les éléments obsolètes et de présentation (par exemple, <font>). En revanche, les cadres ne sont pas autorisés et le balisage doit être rédigé dans un format XML correct.

<html xmlns="http://www.w3.org/1999/xhtml">

L’élément html indique au navigateur qu’il s’agit d’un document HTML général et d’un document XHTML en particulier, comme indiqué par DOCTYPE. L’attribut xmlns indique l’espace de noms XML du document XHTML. En règle général, les développeurs doivent explicitement inclure la déclaration XHTML xmlns lors de la rédaction de documents XHTML.

<head>

La section head d’une page Web vous permet de définir les titres de la page, de fournir des informations relatives au moteur de recherche, de définir l’emplacement de la page, d’ajouter des feuilles de style, d’écrire des scripts, etc. (Par exemple, base, link, meta, script et style).

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

L’élément meta fournit des métadonnées concernant le document. Ces métadonnées sont des informations sur le contenu du document (qui ne sont pas visibles par le lecteur). Elles peuvent être utilisées par le navigateur ou un autre logiciel comme des moteurs de recherche, des systèmes de gestion des documents, etc. Dans le premier modèle (sans élément svg), l’attribut content indique que la page doit tout d’abord être traitée (par le serveur Web à destination du client) en recourant à un en-tête HTTP appelé Content-Type dont la valeur est text/html; charset=utf-8 avant que le contenu réel de la page soit délivré par le serveur. Ce processus permet au navigateur d’afficher correctement les données entrantes de la page (texte/HTML) grâce au codage de caractères adéquat (charset=utf-8). Dans le deuxième exemple (SVG) XHTML, l’élément meta est commenté, car l’indication du codage de caractères à l’aide de l’élément meta est ignorée dans les documents XML/XHTML, et doit être remplacée par la déclaration xml. Les développeurs peuvent basculer entre l’utilisation de l’élément meta en code HTML et la déclaration xml en code XML/XHTML.

<title>

En règle général, l’élément title affiche son texte associé sous l’onglet du navigateur.

</head>

Élément de clôture de head.

<body>

L’élément body est le conteneur du contenu du document XHTML affiché.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">

L’élément svg définit le fragment de document SVG. L’attribut xmlns définit l’espace de noms du fragment SVG. L’attribut version indique la version de langage SVG correspondant à ce fragment de document, et les attributs width et height définissent la taille de la fenêtre d’affichage SVG (dans le cas présent, un carré de 200 x 200 pixels).

<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>

Par rapport à la fenêtre d’affichage SVG, l’élément rect SVG dessine un rectangle noir à partir de l’angle supérieur gauche de la fenêtre d’affichage, ou du point (0, 0), qui présente une largeur et une hauteur maximales. Ce positionnement présente les contours de la fenêtre d’affichage SVG donnée.

<circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/>

De la même manière, l’élément circle SVG dessine un cercle rouge à bordure noire, présentant un rayon de 50 pixels. Le cercle est centré au milieu de la fenêtre d’affichage SVG de 200 x 200 pixels.

</svg>

Élément de clôture de svg.

</body>

Élément de clôture de body.

</html>

Élément de clôture de html.

Méthodes d’affichage SVG

Il existe encore d’autres méthodes permettant d’afficher SVG. Le tableau suivant les récapitule.

MéthodeExtension de fichier recommandéeNavigateur requisAvantages et inconvénients
HTML5 inclus.htmlNavigateur prenant en charge SVG inclus dans HTML5 en mode natif, tel que Windows Internet Explorer 9.

Avantage : vous pouvez tirer pleinement parti des concepts HTML5.

Inconvénient : il peut s’avérer nécessaire d’appliquer un code de secours pour les navigateurs ne prenant pas en charge SVG inclus dans HTML5.
XHTML inclus.xhtmlNavigateur prenant en charge SVG en mode natif, comme Internet Explorer 9.

Avantage : de nombreux navigateurs prennent actuellement en charge SVG inclus basé sur XHTML.

Inconvénient : vous ne pouvez pas tirer parti des concepts HTML5.
Autonome.svgNavigateur prenant en charge SVG en mode natif, comme Internet Explorer 9.

Avantage : facilement incorporable au contenu existant via la méthode Incorporé.

Inconvénient : vous ne pouvez pas tirer parti de tous les concepts HTML/XHTML.
Incorporé.xhtmlNavigateur prenant en charge SVG en mode natif, comme Internet Explorer 9.

Avantage : simple à appliquer, et le comportement de secours est relativement facile en recourant à l’incorporation.

Inconvénient : l’écriture de script d’un contenu SVG dans une page d’incorporation peut être difficile. De surcroît, certains navigateurs peuvent ne pas prendre en charge toutes les formes d’incorporation telles que le référencement de SVG via un élément img ou via un style background-image.
Plug-in.htmlNavigateur capable ou non de prendre en charge SVG en mode natif.

Avantage : le navigateur n’a pas besoin de prendre en charge SVG en mode natif. Comportement SVG homogène entre les navigateurs.

Inconvénient : les plug-ins peuvent provoquer une instabilité du navigateur, les spécifications SVG de W3C peuvent être obsolètes et/ou la prise en charge du plug-in peut être arrêtée par son fournisseur (comme c’est le cas pour le plug-in Adobe SVG Viewer).

 

Remarque  Windows Internet Explorer 8, qui ne prend pas en charge SVG en mode natif, a besoin d’un plug-in pour afficher SVG. Cependant, en appliquant le code de secours approprié (comme mentionné ultérieurement dans cette rubrique), vous n’aurez peut-être pas besoin d’un plug-in SVG.

Des exemples de chacune des cinq méthodes susmentionnées sont donnés dans la section suivante.

HTML5 inclus

L’exemple suivant montre un modèle SVG HTML5 inclus de base. L’exemple de code crée un cercle en balisage SVG et enregistre l’événement de clic de souris. Quand l’utilisateur clique sur le cercle, la taille de ce dernier est modifiée.


<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  <script>

    function doCircle(evt) 
    {
      var theCircle = evt.target;
      var radius = theCircle.getAttribute("r");

      if (radius == 50) 
      {
        radius = 75;
      }
      else 
      {
        radius = 50;
      }
    
      theCircle.setAttribute("r",radius);
    }

  </script>
</head>

<body>
  <svg width="300px" height="300px">
    <text x="25" y="50" font-size="24">SVG Circle Element</text>
    <text x="25" y="275">Click the circle to change its size.</text>
    <circle cx="125" cy="150" r="50" 
            fill="pink" stroke="green" stroke-width="5"
            onclick="doCircle(evt)" />
  </svg>
</body>

</html>

L’élément <!DOCTYPE html> indique au navigateur qu’il s’agit d’un document HTML5. L’élément <meta http-equiv="X-UA-Compatible" content="IE=9"/> sert à forcer Windows Internet Explorer en mode Normes IE9 pour un affichage correct sur les sites intranet. Sachez que pour HTML5, l’attribut xmlns="http://www.w3.org/1999/xhtml" de l’élément html n’est pas applicable.

Astuce  Comme conseillé dans le tableau ci-dessus, enregistrez cet exemple avec l’extension de fichier html.

Remarque  Pour HTML5, le contenu SVG est étendu par défaut, tandis qu’en XHTML il est masqué.

XHTML inclus

Comme SVG repose sur XML, vous pouvez ajouter SVG à un document XHTML en utilisant les espaces de noms corrects, comme indiqué ci-dessous dans ce modèle XHTML inclus de base.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Manipulating the Radius of an SVG Circle</title>
  <script language="javascript" type="text/javascript">
  <![CDATA[  
    var red_circle;  // The object representing circle.
  var r;       // The variable representing circle's radius.
    
    window.onload = function() {
      red_circle = document.getElementById('redCircle');
      r = red_circle.getAttribute("r");
    }
    
    function grow() {
      r = 2*r;
      red_circle.setAttribute("r",r);
    }
    
    function shrink() {
      r = r/2;
      red_circle.setAttribute("r",r);
    }
  ]]>
  </script>
</head>

<body>
  <svg width="200px" height="200px" version="1.1" 
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle id="redCircle" cx="100" cy="100" r="50" 
            style="stroke: black; fill: red;" 
            onmouseover="grow()" onmouseout="shrink()"/>
    <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black;"/>
  </svg>
</body>

</html>

Cet exemple de code crée une fenêtre d’affichage de 200 x 200 pixels et dessine un cercle rouge à bordure noire d’un rayon de 50 pixels. Si vous déplacez le pointeur de la souris sur le cercle affiché, ce dernier double de rayon ; si vous écartez le pointeur du cercle, le rayon actuel du cercle se réduit de moitié. L’élément rectangle sert à afficher les contours de la fenêtre d’affichage.

Astuce  Comme conseillé dans le tableau ci-dessus, enregistrez cet exemple avec l’extension de fichier xhtml.

La solution XHTML inclus fonctionne bien, mais requiert l’extension de fichier xhtml et des espaces de noms. Jusqu’à l’avènement récent de HTML5, cette solution était la meilleure qui soit.

SVG autonome

À l’origine, SVG fut conçu pour fournir un format de fichier graphique vectoriel grâce à l’extension de fichier svg. L’exemple suivant montre un modèle SVG autonome de base.


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
                     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     onclick="doSomething(evt)">

  
  <script language="javascript" type="text/javascript">
  <![CDATA[

    function doSomething(evt) 
    {
      var myRect = evt.target;
  
      if (myRect.id != "redRect") 
      {
        alert("Please click on the rectangle");
        document.location.reload();
      }
  
      var myWidth = myRect.getAttribute("width");
      
      if (myWidth == 50)
        myRect.setAttribute("width", 100);
      else
        myRect.setAttribute("width", 50);
    }
   
  ]]>
  </script>

  <!-- Outline the SVG viewport. -->
  <rect x="0" y="0" width="100%" height="100%" 
        style="fill: none; stroke: black; stroke-width: 5px;" /> 
  
  <rect id="redRect" x="100" y="100" width="50" height="50" 
        fill="red" stroke="blue" />
    
</svg>

Cet exemple de code développe et contracte alternativement le rectangle rouge à chaque clic de souris à l’intérieur du rectangle. Si le clic se produit à l’extérieur du rectangle rouge, un message d’alerte apparaît et la page est rechargée.

Comme mentionné plus haut, l’attribut standalone="no" de l’élément xml (la première ligne) du modèle indique que le fichier DTD spécifié dans l’élément DOCTYPE doit être utilisé pour plusieurs validations. Il est inutile de préciser la valeur standalone=”no”, car elle est présupposée lorsqu’une déclaration de balisage externe (DTD, dans notre cas de figure) est présente.

Astuce  Comme conseillé dans le tableau ci-dessus, enregistrez cet exemple avec l’extension de fichier svg.

Incorporé

Les éléments iframe, embed, object et img et le style background-image CSS peuvent être utilisés, en fonction du navigateur, pour incorporer SVG dans une page Web. Notez bien que certaines de ces méthodes d’incorporation ne seront peut-être pas disponibles avec certains navigateurs. L’exemple suivant présente le modèle SVG de base, qui utilise l’élément object.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>  
  <title>Embedding SVG</title>
</head>

<body>
  <h1>Embedding SVG in an XHTML Document</h1>
  <p>Embedding the file <em>standAlone.svg</em> using the <strong>object</strong> 
     element:</p>
  <object data="standAlone.svg" width="302px" height="302px" type="image/svg+xml">
    <img src="standAlone.png" alt="PNG image of standAlone.svg" />
  </object>
</body>

</html>

Astuce  Comme conseillé dans le tableau ci-dessus, enregistrez cet exemple avec l’extension de fichier xhtml. Sachez également que le fichier SVG incorporé, standAlone.svg dans le cas présent, doit porter l’extension de fichier svg.

Dans l’hypothèse où le fichier SVG n’est pas incorporé via l’élément img ou en tant qu’arrière-plan CSS, ce fichier SVG incorporé contient généralement une programmation quelle qu’elle soit, mais l’incorporation ne facilite pas l’interaction programmable entre le document SVG incorporé et le document HTML d’incorporation, sauf si le fichier SVG incorporé provient du même domaine que la page d’incorporation. Cette méthode n’est habituellement pas conseillée pour la programmation de SVG dans une page Web, mais elle s’avère pratique pour insérer facilement un fichier SVG et peut être utile en cas de secours pour les navigateurs plus anciens comme Internet Explorer 8 qui ne prennent pas en charge SVG en mode natif.

Remarque  Du fait que certains navigateurs ne prennent pas en charge toutes les formes d’incorporation de SVG, effectuez des tests sur l’ensemble des navigateurs ciblés.

Plug-in

La liste suivante identifie certaines des raisons pour lesquelles la solution de plug-in n’est pas recommandée :

  • Le plug-in de navigateur SVG principal, Adobe SVG Viewer, n’est plus pris en charge par Adobe.
  • La plupart des navigateurs modernes ne prennent pas en charge SVG en mode natif.
  • Les plug-ins tiers risquent d’entraîner une instabilité du navigateur ou ne plus être pris en charge par le fournisseur de plug-in à un moment donné.

Récapitulatif

Le tableau suivant résume les modèles traités dans cette rubrique.

MéthodeModèleExtension de fichier recommandéeServeur de type MIME recommandé
HTML5 inclus

<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="X-UA-Compatible" 
         content="IE=9"/>
    <style>
    </style>
    <script>
    </script>
  </head>
  
  <body>
  .
  .
  .
    <svg width="120" height="90">

      <!-- SVG markup here. -->

    </svg>
  .
  .
  .
  </body>

</html>

.htmltext/html
XHTML inclus

<?xml version="1.0"?>
<!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <script language="javascript" type="text/javascript">   
  <![CDATA[
  ]]>
  </script>  
</head>
<body>
.
.
. 
  <svg width="120px" height="90px" version="1.1" 
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- SVG markup here. -->

  </svg>
.
.
.
</body>

</html>

.xhtmlapplication/xhtml+xml
Autonome

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     
  <!-- SVG markup here. -->
      
</svg>

.svgimage/svg+xml
Incorporé

<?xml version="1.0"?>
<!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Embedding SVG</title>
</head>

<body>
  <h1>Embedding SVG in an XHTML Document</h1>
  <p>Embedding the file <em>standAlone.svg</em>  
     using the <strong>object</strong> element:</p>
  <object data="standAlone.svg" type="image/svg+xml"
          width="302px" height="302px">
    <!-- Implement fallback code here, or display a message: -->
    <p>Your browser does not support SVG - please upgrade to a modern browser.</p>
  </object>
</body>

</html>

.xhtml, .htmltext/html
Plug-inNon recommandé..htmlNon recommandé.

 

Remarque  Microsoft Internet Information Services (IIS), dans sa configuration par défaut, ne traite pas les fichiers portant l’extension .svg. Pour demander des pages Web .svg à partir d’IIS, vous devez ajouter un mappage de "types MIME" de .svg en image/svg+xml.

Pour les navigateurs prenant en charge SVG et HTML5 en mode natif, la meilleure solution reste la méthode HTML5 inclus.

Pour les navigateurs qui ne prennent pas totalement en charge HTML5, mais qui sont compatibles avec SVG en mode natif, utilisez la méthode XHTML inclus ou Autonome, suivie de la méthode Incorporé, selon le cas.

Pour les navigateurs ne prenant pas en charge SVG en mode natif, nous suggérons d’appliquer des mesures de secours appropriées, comme l’affichage d’une image statique du graphique SVG.

Utilisez <meta http-equiv="X-UA-Compatible" content="IE=9"/> pour activer SVG pour une application HTML (HTA). Pour plus d’informations, voir la rubrique Présentation des applications HTML (HTA).

Rubriques associées

Comment faire un zoom et un panoramique avec SVG
SVG
Informations de référence sur SVG

 

 

Afficher:
© 2014 Microsoft. Tous droits réservés.