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" target="_parent">
  <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" target="_parent">
  <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" target="_parent">
  <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. An explicit target command avoids that problem.

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.