Exemple

Si vous ne voyez pas un graphique, votre navigateur ne peut pas ou n'est pas configuré pour afficher le SVG :

  [[SVG][width=350][height=130]
  <circle cx="100" cy="50" r="50" fill="blue" opacity="0.5" />  
  <circle cx="120" cy="100" r="20" fill="red" opacity="0.5" />
  <path d="M 0,50 l 300,0" stroke="green" stroke-width="20" opacity="0.7" />  
  <path d="M 0,100 L 300,100" stroke="green" stroke-width="10" opacity="0.3" />  
  <text x="160" y="20" font-family="Courier New, terminal" font-size="16pt" 
  font-weight="bold">Bonjour, SVG !</text>
  ]

Exemples supplémentaires

Cet exemple utilise le paramètre de code d'affichage et réutilise une forme définie ("path" en jargon SVG).

<defs>
  <path id="path1"
    d="M 20,40 C 120,-40 200,100 20,190 L 140,190" 
    stroke-width="10" 
  />
</defs>

<use xlink:href="#path1" fill="none" stroke="black" /> 

<use xlink:href="#path1" fill="red" stroke="blue" 
transform="translate(120,100) scale(0.5) rotate(-30)" />

<use xlink:href="#path1" fill="green" stroke="black" 
transform="translate(200,80) scale(0.3) rotate(-60)" />

Exemples supplémentaires - Liens

Les textes sont des liens actifs :

<g font-family="Verdana, sans serif">

<a xlink:href=" http://www.google.com">
<ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" fill="skyblue" />
<text x="2cm" y="4.2cm" text-anchor="middle" font-size="32">Google</text>
</a>

<a xlink:href=" http://www.yahoo.com">
<ellipse cx="4cm" cy="2cm" rx="2cm" ry="1cm" fill="springgreen" />
<text x="4cm" y="2.2cm" text-anchor="middle" font-size="32">Yahoo</text>
</a>

<a xlink:href=" http://www.amazon.com">
<ellipse cx="6cm" cy="5cm" rx="2cm" ry="1cm" fill="yellow" />
<text x="6cm" y="5.2cm" text-anchor="middle" font-size="32">Amazon</text>
</a>

</g>

Actuellement, les navigateurs réagissent différemment à l'activation des liens. Quelques-un remplacent la page par la cible, d'autres remplacent la fenêtre SVG par la cible.

Paramètres

• width : définit l'extension horizontale de l'espace blanc
• (par défaut : 320) ; par ex. [width=600]

• height : définit l'extension verticale de l'espace blanc
• (par défaut : 240); par ex. [height=300]

• showcode : affiche le graphique SVG et le code SVG dans des cellules de tableaux verticalement (=1) ou horizontalement (=2).
• (par défaut : 0); par ex. [showcode=1]

Vos propres Tests

Si vous voulez produire vos propres tests, utilisez CdmlSvg/PageTest.

Documentation SVG

SVG est un langage grand, complexe. Regardez sur StructuredVectorGraphics pour des liens vers la documentation du standard.

ProWiki:CdmlSvg