SimpleVectorGraphics

SVG is an XML dialect for describing simple pictures.

For example, you can describe two circles and a rectangle. These are two of the basic shapes SVG can draw.

<circle cx="100" cy="100" r="5"></circle>
   <circle cx="200" cy="150" r="10"></circle>
   <rect height="150" rx="10" ry="5" 
         width="200" x="50" y="50"></rect>

We use css to style the shapes. All SVG shapes have two attributes named 'stroke' and 'fill' which are used to paint them.

circle{
fill:pink;
stroke:red;
}
rect{
stroke:green;
fill:none;
}

Try this in the SVG sandpit. Copy the SVG and CSS given above into the right text boxes. Click render SVG then Apply CSS.

We can define a symbol by enclosing some basic objects in <symbol> tags and giving it an ID. Then we can use this symbol. See the examples in the sandpit.