Example

Iif you do not see a graphic, your browser is not able/configured for SVG:

  [[SVG][width=300][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">Hello, SVG!</text>
  ]

Further examples

This example uses the showcode parameter and reuses a defined shape ("path" in SVG jargon).

<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)" />

Further examples - Links

The texts are active links :

<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>

Currently browsers react differently to the activation of the links. Some replace the the page by the target, some replace the SVG window by the target.

Parameters

• width: defines the horizontal extension of the blank space
• (default: 320); e.g. [width=600]

• height: defines the vertical extension of the blank space
• (default: 240); e.g. [height=300]

• showcode: displays the SVG graphics and SVG code in tablecells vertically (=1) or horizontally (=2).
• (default: 0); e.g. [showcode=1]

Your own Testing

If you want to do your own testing, use the CdmlSvg/TestPage.

SVG documentation

SVG is a large, complex language of its own. Look into StructuredVectorGraphics for links to the standard's documentation.