Basic shapes

To draw SVG, there are various basic shapes. The purpose of these shapes is easily understandable through their name.

When you define the elements then it correspond to different shapes and there are different attributes to describe the size and position of those shapes.

SVG provides number of shapes to draw images. These are as follows:

Rectangle

The rect element is used to draw a rectangle on the screen. To control the position and shape of the rectangle on screen there are 6 basic attributes.

x : It define the position of the top left corner of the rectangle.

y : It define the top position of the rectangle.

width : It defines the width of the rectangle.

height : It defines the height of the rectangle.

fill-opacity : It is used to define the opacity of the fill color. Its range can be 0 to 1.

stroke-opacity : It defines the opacity of the stroke color. Its range can be 0 to 1.

Example

Circle

The circle element is used to draw a circle on the screen and there are 3 basic attributes that are applicable here.

r: It defines the radius of the circle.

cx: It defines the x coordinates of the center of the circle.

cy: It defines the y coordinates of the center of the circle.

Example

Ellipse

Ellipse is a more general form of the circle element. You can scale the x and y radius of the circle separately.

Attribute used to draw an ellipse:

rx: It defines the horizontal radius.

ry: It defines the vertical radius.

cx: It defines the x coordinate of the center of the ellipse.

cy: It defines the y coordinate of the center of the ellipse.

Example

Line

The line attribute is used to draw a straight line on the screen. It has two points which specify the start and end point of the line.

x1: It defines the start of the line on the x-axis.

y1: It defines start of the line on the y-axis.

x2: It defines the end of the line on the x-axis.

y2: It defines the end of the line on the y-axis.

Example

Polyline

Polyline is a connected straight line group. It has all the points of line in one attribute.

Example

In this list, each number is separated by a space, comma. Each point must contain two numbers that define the x coordinate and the y coordinate. So the list of points (0,0), (1,1) and (2,2) could be written as "0 0, 1 1, 2 2".

Path

Path is the most general shape that can be used in SVG. Through the path element, you can draw ellipse, rectangle, polygons, circles and polylines. To control its shape there is a single attribute.

Example

Explanation

This code defines a path that starts at position 250,10 with a line to position 100,200 then from there, a line to 400,200 and finally closing the path back to 250,10.