SVG avec XHMTL

De EduTech Wiki
Aller à la navigation Aller à la recherche

Introduction

On peut imbriquer des graphismes SVG dans une page XHTML. Cette page doit être servie comme XHTML, c'est-à-dire le serveur doit utiliser le Type MIME application/xhtml+xml. A TECFA les fichiers *.xhtml sont servis comme XHTML.

Toutefois, étant donné que la coalition HTML5 a réussi à tuer l'esprit XML et donc XHTML, cette solution n'est plus tellement intéressante et risque de ne plus marcher dans certains navigateurs. On conseille d'utiliser SVG avec HTML5, car SVG fait partie intégrante de la norme HTML5. La seule raison pour utiliser encore XHTML est la possibilité d'utiliser d'autres langages XML dans le même document.

Balises SVG / XHTML mixtes (document non-validé)

Cet exemple marche avec tous les navigateurs qui implémentent XHTML.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:svg="http://www.w3.org/2000/svg">
 <head>
  <title>SVG within XHTML Demo</title>
 </head>
 <body>

  <p> You can embed SVG into XHTML, provided that your browser natively implements
SVG. E.g. Firefox 1.5 supports most of static SVG.
  </p>

  The SVG part starts below <hr />

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

   <!-- un petit rectangle avec des coins arrondis  -->
   <rect x="50" y="50" rx="5" ry="5" width="300" height="100" style="fill:#CCCCFF;stroke:#000099"/>
   
   <!-- un texte au meme endroit -->
   <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
    HELLO cher visiteur 
   </text>

  </svg>
  <hr />
  The SVG part ended above
</body>
</html>

Fichier: http://tecfa.unige.ch/guides/svg/ex/svg-intro/hello-svg-within-xhtml.xhtml