René Nyffenegger's collection of things on the web
René Nyffenegger on Oracle - Most wanted - Feedback -
 

SVG tags

All elements can be given the id and xml:base attribute.

<circle>

This is one of the basic shapes.
See the circle example.

<defs>

This tag defines an SVG tag without rendering it. It is used, for example, to embed Java Script.
Where a defs tag can be used a g tag can be used as well.

<desc>

<ellipse>

This is one of the basic shapes.
See the ellipse example.

<g>

Where a g tag can be used a defs tag can be used as well.
Creates a temporary black, 100% transparent canvas on which nested graphic elements are placed.
A g element can contain other g elements (that is: nesting of g elements is possible)

<image>

Renders raster images (PNG, JPEG) or files whose MIME type is image/svg+xml.

<line>

This is one of the basic shapes.
See the line example.

<linearGradient>

<metadata>

<path>

Commands:
  • M: move to
  • L: line to
  • H: horizontal line to
  • V: vertical line to
  • C: curve to (cubic Bézier)
  • S: smooth curve to (cubic Bézier)
  • Q: quadratic Bézier curve
  • T: smooth quadratic Bézier curve to
  • A: elliptical arc
  • Z: close path
The positioning is relative if the letters are lower letters instead of capital letters. 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%">
  <path d=" M   10   40 
            l    0  100 
            l  200    0 
            l  -50  -80 
            Z" />
</svg>
Start at position 10 pixels from the left and 40 pixels from the top. Then go 0 pixels to the right and 100 pixels down. Then go 200 pixels to the right and 0 pixels down. Then go 50 pixels to right and 80 pixels up. Then close the path.

<polyline>

This is one of the basic shapes.
See the polyline example.

<polygon>

This is one of the basic shapes.
See the polygon example.

<rect>

This is one of the basic shapes.
See the rect example.

<stop>

<style>

<?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='600' height='400' xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>

     <style type="text/css">
      <![<a href='http://www.adp-gmbh.ch/xml/dtd.html#cdata'>CDATA</a>[
                    .foo {stroke:green;stroke-width:1px;}
                    .bar {stroke:blue ;stroke-width:4px;}
      ]]>
      </style>

  </defs>

  <line class='foo' x1= '10' y1= '10' x2='100' y2='100'  />
  <line class='bar' x1='200' y1='100' x2='100' y2='200'  />
  <line class='foo' x1='400' y1= '10' x2='500' y2='300'  />
  <line class='bar' x1='500' y1='100' x2='200' y2='300'  />

</svg>

<svg>

<switch>

Allows to distinguish between capabilities of a user agent.

<symbol>

<text>

See the text example.

<tref>

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xml:space='default' width='200px' height='200px'>
   <<a href='#defs'>defs</a>>
      <text id='t'>some text</text>
   </defs>

   <<a href='#text'>text</a> style='font-size: 20px;' x='10px' y='50px' >
      <tref xlink:href='#t' />
   </text>
</svg>

<tspan>

<title>

<use>

Used to reference a g, svg or another graphical element (that has a unique id). It can apply transformations and styles to the defined element. 
<svg width='600' height='400'>    
  <<a href='#defs'>defs</a>>
    <<a href='#rect'>rect</a> id='r' width='75' height='45' style='fill:#aa99dd;' />                            
  </defs>
  
  <use x= '90' y= '50' xlink:href='#r' />                        
  <use x='300' y='200' xlink:href='#r' />                        
  <use x='510' y='350' xlink:href='#r' />                        
</svg>