July 28, 2016
Cdml Svg

CdmlSvg ist a CdmlElement to support SVG (see StructuredVectorGraphics).


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

  Error: SVG-Plugin missing - please install

is produced by the following input:
  <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).

Error: SVG-Plugin missing - please install

  <path id="path1"
    d="M 20,40 C 120,-40 200,100 20,190 L 140,190" 

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

Error: SVG-Plugin missing - please install

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

<a xlink:href="" 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 xlink:href="" 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 xlink:href="" 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>


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.


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

FolderWikiFeatures FolderCdml