SVG Shapes

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:

  • line
  • rect
  • circle
  • ellipse
  • polyline
  • polygon

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.

Line

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.

Rect

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.

Circle

The circle element is defined by three values: cx and cy define the coordinate of the centre; r defines the radius.

Ellipse

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.

Comments

Any way to provide a tutorial on how to resize the svg elements dynamcially?

Post new comment

The content of this field is kept private and will not be shown publicly.