<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.
<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.
<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.
<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.
<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.
<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.