In this tutorial, I will show you how to draw basic shapes in SVG. You can easily draw shapes in SVG using the shape elements. The shape elements are explained with examples as follows.
Line
You can draw a line using the <line> element. The “x1” and “y1” attributes of the <line> element define the starting point of the line, and the “x2” and “y2” attributes define the endpoint.
The example below defines the line color and line width using CSS properties. The “stroke” and “stroke-width” properties are used for line color and line width respectively.
Example:
<svg height="180" width="300"> <line x1="0" y1="0" x2="150" y2="150" style="stroke:green;stroke-width:2" /> </svg>
Output:
This example defines the line color and line width using attributes of the element. The “stroke” and “stroke-width” attributes are used to set the line color and line width respectively.
Example:
<svg height="300" width="300"> <line x1="0" y1="0" x2="150" y2="150" stroke="blue" stroke-width="2" /> </svg>
Output:
Rectangle
You can draw a rectangle using the <rect> element in SVG. Set the width and height of your rectangle using the “width” and “height” attributes of the <rect> element.
Example:
<svg width="250" height="120"> <rect width="200" height="100" stroke="green" stroke-width="2" fill="white"> </svg>
Output:
The example below sets the opacity for stroke and fill color in CSS. Using the “x” and “y” attributes, you can place the rectangle in a particular position on the screen.
Example:
<svg width="300" height="150">
<rect x="0" y="0" width="220" height="100" style="fill:green;stroke:green;stroke-width:3;fill-opacity:0.1;stroke-opacity:0.5">
</svg>
Output
Circle
You can draw a circle using the <circle> element in SVG. Set the position of the circle’s center using the “cx” and “cy” attributes. The “r” attribute sets the radius.
Example:
<svg height="250" width="300">
<circle cx="100" cy="100" r="50" stroke="green" stroke-width="2" fill="yellow" />
</svg>
Output:
Ellipse
You can draw an ellipse using the <ellipse> element in SVG. Set the center’s position of ellipse using the “cy” and “cx” attributes. The “rx” and “ry” attributes are used to set the vertical and horizontal radius.
Example:
<svg height="300" width="300">
<ellipse cx="120" cy="100" rx="100" ry="50" fill="white" stroke="green" stroke-width="2" />
</svg>
Output:
Polygon
Use the <polygon> element to draw a polygon in SVG.
Example:
<svg height="150" width="150">
<polygon points="0,50 50,0 100,50 70,100 30,100 " fill="yellow" stroke="green" stroke-width="3" />
</svg>
Output:
Polyline
You can draw a polyline using the <polyline> element in SVG.
Example:
<svg height="150" width="300">
<polyline points="0,0 50,10 70,40 50,80 100,90" stroke="green" stroke-width="3" fill="none" />
</svg>
Output:
In this lesson, you have learned how to draw shapes in SVG. The next lesson will talk about embedding images in SVG.