« SVG avec XHMTL » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « == Introduction == On peut imbriquer SVG dans une page XHTML. Cette page doit être servie comme XHTML, c'est-à-dire le serveur doit utiliser le Type MIME '''applica... »)
 
 
Ligne 1 : Ligne 1 :
== Introduction ==
== Introduction ==


On peut imbriquer 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.
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 [[Tutoriel SVG avec HTML5|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.
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 [[Tutoriel SVG avec HTML5|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.

Dernière version du 6 mai 2020 à 17:11

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