Introduction
This chapter demonstrates about the SVG Basic Shapes. SVG provides some basic shapes to draw the images, by using these images user can build the documents following are the concepts covered in this chapter.
- Basic SVG Shapes
Description
SVG have several basic shapes by using these shapes user can build the some images. Shapes are very useful while building the projects, following are some basic SVG shapes.
- Circle
- Rectangle
- Line
- Poly line
- Polygon
- Eclipse
Description
User can draw the circle by using the 
<circle> element which consist of some values like center point and radius. The code below demonstrates drawing a circle using SVG.
<html> <title>SVG Circle</title> <body> <h1>SVG Circle Example</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" >Circle :SPlessons</text> <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="rgb(121,0,121)"></circle> </g> </svg> </body> </html>
In the above code cx and cy known as the center of the circle and r is known as the radius of the circle.
Result
Run the above code in a preferred browser the output get display as shown in below image.
Description
User can draw the SVG Rectangle by using the 
<rect> element. The size of the rectangle adjusted by height and width attributes and fill property is used to fill the color of the rectangle and stroke-width property used to fill the border of the rectangle. The code below demonstrates to draw the SVG rectangle.
<html> <title>SVG Rectangle</title> <body> <h1>SVG Rectangle Example</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" > Rectangle: SPlessons.</text> <rect x="100" y="30" width="300" height="100" style="fill:rgb(0,130,121);stroke-width:3;stroke:rgb(0,0,0)"></rect> </g> </svg> </body> </html>
Result
Run the above code in a preferred browser the output get display as shown in below image.
Description
User can draw the SVG Line by using the 
<line> element. User can draw the line from the starting to the ending point in the line segment x1, y1, x2, y2 are the x-axis and y-axis co-ordinates. The code below demonstrates the drawing a SVG Line
<html> <title>SVG Line</title> <body> <h1>SVG Line Example</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" >Line: SPLessons.</text> <line x1="20" y1="20" x2="150" y2="150" stroke="black" stroke-width="3" fill="rgb(0,150,131)"></line> </g> </svg> </body> </html>
Result
Run the above code in a preferred browser the output get display as shown in below image.
Description
User can draw a straight line by using the 
<poly line> element. The code below demonstrates drawing a straight line using poly line shown below.
<html> <title>SVG Polyline</title> <body> <h1>SVG Polyline Example</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" >Polyline : SPlessons.</text> <polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" stroke="black" stroke-width="3" fill="none"></polyline> </g> </svg> </body> </html>
Result
Run the above code in a preferred browser the output get display as shown in below image.
Description
By using the 
<polygon> element user can draw a polygon. the code below demonstrates drawing a polygon using SVG.
<html>
<title>SVG Polygon</title>
<body>
<h1>SVG Polygon Example</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Polygon: SPlesson.</text>
<polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke="black" stroke-width="3" fill="rgb(250,121,0)"></polygon>
</g>
</svg>
</body>
</html>
Result
Run the above code in a preferred browser the output get display as shown in below image.
Description
User can draw the Eclipse by using the 
<eclipse> element which contain x, y and radius the difference between the circle and eclipse is circle contains same values of x, y and radius but in eclipse radius is difference from x,y axis’s. The code below demonstrates drawing an eclipse.
<html> <title>SVG Ellipse</title> <body> <h1>SVG Ellipse Example</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" >Ellipse : Eclipse.</text> <ellipse cx="100" cy="100" rx="90" ry="50" stroke="black" stroke-width="3" fill="rgb(150,250,0)"></ellipse> </g> </svg> </body> </html>
Result
Run the above code in a preferred browser the output get display as shown in below image.
Key Points
- Poly line which contain only straight lines.
- Basic SVG shapes supported by all the browsers.
- Line can be draw from starting point to ending point.