UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  3. SVG de base

3. SVG de base

3.1 Viewer et serveur

A. SVG avec un viewer ou plugin

B. Mime-types que votre serveur doit définir (!)

*.svg image/svg+xml

*.svgz image/svg+xml

3.2 Structure d’une simple page SVG

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg>
 .....
</svg>

<svg xmlns="http://www.w3.org/2000/svg">

....

</svg>

Template SVG 1.0 à copier (pour le plugin Adobe 3.0)

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 

          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="250" 

     xmlns="http://www.w3.org/2000/svg">


 
</svg>

 

Template SVG 1.0 à copier (pour Opéra 9 et Firefox 2.x)

...contient déjà un peu de code SVG que vous pouvez enlever

<?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="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  
 <desc>Four separate rectangles  </desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />
 
</svg>

Exemple 3-1: Hello SVG - la structure d’un fichier SVG

Ignorez les détails (rectangle + texte) pour le moment
 
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 

          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg>

 
 <!-- un petit rectangle avec des coins arroundis  -->
 <rect x="50" y="50" rx="5" ry="5" width="200" 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>

 

3.3 Imbrication d’un fichier SVG dans HTML

Version canonique pour HTML et pseudo XHTML

<embed src="..." with=".." height="..." type="image/svg+xml" />

Version "iframe"

Exemple 3-2: Hello avec SVG et un iframe

<iframe src="hello-svg.svg" height="540" width="99%" frameborder="0">
... Sorry you need an SVG plugin ...
</iframe>

Version XHTML pour la combinaison IE/Adobe Viewer

<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object>
<?import namespace="svg" urn="http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>
 <svg:svg width="300" height="200">
     <svg:circle cx="150" cy="100" r="50" />
</svg:svg>

Balises mixtes SVG / XHTML

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

<?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 arroundis  -->
   <rect x="50" y="50" rx="5" ry="5" width="300" height="100"
         style="fill:#CCCCFF;stroke:#000099"/>
   <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>
UPPREVIOUS NEXT -- TIE