How To Create Basic Shapes In SVG

Since SVG contain geometric objects such as lines and curves, we have to learn how to create basic shapes like rectangle, circle, elipse, line, polylines and polygons at first. You have to define a shape’s position, radius, width, and height as attributes while creating such shapes.

Table of Contents

Basic Shapes in SVG

Following are the basic shape elements used in SVG.

<rect> element

The <rect> element defines a rectangle which requires width and height attributes where value of zero disables rendering of the element. You can also specify x and y attributes, which specify the position in relation to the top-left corner of the SVG canvas. If the attribute is not specified, the effect is as if a value of “0” were specified.

Rounded rectangles can be achieved by setting appropriate values for attributes rx and ry. If only rx is specified, ry is equal to rx.

Following is an example code to create rectangle shape with “lightgreen” fill color and “red” stroke having 10px stroke width.

<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg”>
<rect x=”5″ y=”5″ width=”200″ height=”100″ rx=”40″ ry=”10″
stroke=”red” stroke-width=”10″
fill=”lightgreen” fill-opacity=”0.6″ />
</svg>
</body>
</html>

<circle> element

The ‘circle’ element defines a circle based on a center point and a radius. Where the attributes cx and cy are the coordinates of the center of the circle for x-axis and y-axis respectively.

Similar to the x, y attributes of <rect> element, if the attribute is not specified for cx and cy, the effect is as if a value of “0” were specified. Another attribute r of this element is the length of the radius of the circle.

Following is an example code to create circle with “pink” fill color and “green” stroke having 5px stroke width.

<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”80″ cy=”80″ r=”60″
stroke=”green” stroke-width=”5″ fill=”pink” fill-opacity=”0.6″/>
</svg>
</body>
</html>

<ellipse> element

The ‘ellipse’ element defines an ellipse which provides the additional attribute rx and ry for both the x and y radius values where a value of zero disables rendering of the element. The attributes cx and cy are same as the <circle> element.

Following is an example code to create ellipse with “lightgreen” fill color and “brown” stroke having 0.9px stroke width.

<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”110″ cy=”55″ rx=”90″ ry=”50″
stroke=”brown” stroke-width=”0.9″
fill=”lightgreen” fill-opacity=”0.6″ />
</svg>
</body>
</html>

<line> element

The ‘line’ element defines a line segment that starts at one point and ends at another. Where the attributes x1 and y1 are the coordinates of the start of the line for x-axis and y-axis respectively. If the attribute is not specified, the effect is as if a value of “0” were specified.Similarly, x2 and y2 are the coordinates of the end of the line for x-axis and y-axis respectively.

Following is an example code to create line with “green” stroke having 10px stroke width.

<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg”>
<line x1=”30″ y1=”10″ x2=”280″ y2=”100″ stroke=”green” stroke-width=”10″ stroke-linecap=”round”/>
</svg>
</body>
</html>

<polyline> element

The ‘polyline’ element defines a set of connected straight line segments. Typically, ‘polyline’ elements define open shapes. Polyline element simply require the points attribute, which contains a list of x,y value pairs.

Following is an example code to create polyline with “pink” fill color and “lime” stroke having 10px stroke width.

<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg”>
<polyline points=”100,30 140,130 210,130 250,30″
fill=”pink” fill-opacity=”0.7″ stroke=”lime”
stroke-width=”10″ stroke-linecap=”round” stroke-opacity=”0.5″ />
</svg>
</body>
</html>

<polygon> element

The ‘polygon’ element defines a closed shape consisting of a set of connected straight line segments.

Similar to polyline element polygon element also require the points attribute, which contains a list of x,y value pairs.

Following is an example code to create polygon with “blue” fill color and “red” stroke having 10px stroke width.

<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg”>
<polygon points=”100,10 85,65 40,75 85,95 100,145 110,95 155,75 110,65″ fill=”blue” fill-opacity=”0.9″ stroke=”red”
stroke-width=”10″ stroke-opacity=”0.7″ stroke-linejoin=”miter”/>
</svg>
</body>
</html>