Tuesday, 1st May 2012
There are six SVG shape elements. They never have any contents and are defined by specific attributes, which default to zero if not specified. The six elements are:
In all cases coordinates are given with the top left corner as (0, 0) with the x-axis increasing rightwards and the y-axis increasing downwards. The units of attributes is pixels, but this can be changed by using the SVG viewBox attribute. The order of attributes in not important.
In all of the examples below you can drag the control points (shown as coloured circles) to change a shape's attributes or you can click on an attribute's value and drag horizontally to change it.
The line element is defined by four values: x1 and y1 define the coordinate of the start point; x2 and y2 define the coordinates of the end point.
The rect element is defined by four values: x and y define the coordinate of the top left corner; width and height unsurprisingly define the width and height. They must be positive. There are also rx and ry attributes which define how rounded the corners are, but I've not got an example of that yet.
The circle element is defined by three values: cx and cy define the coordinate of the centre; r defines the radius.
The ellipse element is defined by four values: cx and cy define the coordinate of the centre; rx defines its axis in the x direction; ry defines its axis in the y direction.
Polyline and Polygon
Polyline and polygon are both defined by a single attribute: points. This attribute is a series of comma- or space- separated coordinates and are very similar to the SVG path, which is the subject of the next tutorial. The difference between polyline and polygon is that a polygon is closed, so an additional line is created between the first and final coordinates.