Integrare XHTML con SVG

Integrare XHTML con SVG

Integrare XHTML con SVG è possibile solo a patto di rispettare i requisiti necessari affinchè il nostro documento venga validato. Non solo è necessario che il documento XHTML venga servito come application/xhtml+xml, ma anche che tale documento abbia una DTD specifica che permetta l'integrazione dei due standard. Nel nostro caso il documento XHTML viene definito host in quanto ospita altri linguaggi. Più precisamente, la DTD da utilizzare include oltre a SVG anche MathML.

La DTD è la seguente:


<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
    "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd."> 

Quindi abbiamo i seguenti linguaggi:

  1. XHTML 1.1 (host)
  2. MathML 2.0
  3. SVG 1.1

Nella DTD, il termine plus indica inclusione. Ecco un documento di esempio:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
    "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd."> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG e XHTML</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
</head>

<body>

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="300px" height="200px" version="1.1">
      <svg:circle cx="100px" cy="100px" r="50px" fill="#ffcc00" stroke="#000000" stroke-width="5px"/>
</svg:svg>

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="10cm" height="8cm"
    viewBox="0 0 500 400" version="1.1"> 
    <svg:title>A star</svg:title> 
    <svg:polygon style="fill:red; stroke:blue; stroke-width:10"
                 points="210,46 227,96 281,97 238,129
                         254,181 210,150 166,181 182,129
                         139,97 193,97"/> 
  </svg:svg> 




</body>
</html>

Potete visionare il documento di esempio in questa pagina.

Torna su