Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to draw a circle using an SVG tag in html?
The HTML’s SVG tag is a container that is used to describe the 2D graphics. The SVG stands for Scalable Vector Graphics and represents the two-dimensional graph in the X and Y coordinate system of any vector diagrams. This type of tag is mostly helpful to draw vector diagrams like circles, rectangles, rounded- rectangles, squares, triangles, stars, etc.
There are various ways of drawing a circle with the help of SVG tags like using The <circle> tag, <ellipse> tag as well as <path> tag in HTML. Here we are going to learn two tags out of these three i.e. <cirlce> and <ellipse> tags.
Syntax
The following syntax is used in the examples are −
<svg> </svg>
This is a graphics element in HTML that can be used to draw different types of shapes like- circle, rectangle, square, etc.
<ellipse> </ellipse>
Properties of <SVG> tag
The following properties used in the circle are −
r − The ‘r’ attribute defines the radius of a circle.
cx − The ‘cx’ attribute defines the ‘x’ coordinate of the center of a circle. The length of the attribute is measured in the horizontal direction.
cy − The ‘cy’ attribute defines the ‘y’ coordinate of the center of a circle. The length of the attribute is measured in the vertical direction.
stroke − The stroke attribute defines the outline of a circle and sets the color to its value.
stroke-width − This attribute defines the length of the width.
fill − This attribute fills the color into a circle.
Example 1
In this example, the HTML code creates a simple web page called "Circle" with the name. The text "Circle using SVG" appears in a heading element, indicating that the page's goal to display a circle using SVG. The circle has been drawn using an SVG element. The SVG element enables the circle element to set certain attributes, such as r, cx, cy, stroke, and stroke-width, and produce a complete circle on the webpage as a result.
<!DOCTYPE html>
<html>
<title>Circle</title>
<head>
</head>
<body>
<h1>Circle using SVG</h1>
<svg>
<circle r="45" cx="80" cy="100" stroke="green" stroke-width="4" fill="#bf6660">
</circle>
<svg>
</body>
</html>
Example 2
In the following example, we will use the element named ellipse inside the svg element that draws the circle. To design the good shape of a circle it has used some properties of SVG.
<!DOCTYPE html>
<html>
<title>Circle</title>
<head>
<style>
ellipse{
stroke: red;
stroke-width: 8;
}
</style>
</head>
<body>
<h1>Circle using SVG and Ellipse</h1>
<svg>
<svg height="240" width="400">
<ellipse cx="180" cy="80" rx="100" ry="50"/>
</svg>
</svg>
</body>
</html>
Advantages of SVG
The SVG images are scalable and zoomable.
This type of graphic does not lose the quality of the image.
This type of image can be edited in any text editor.
This type of vector diagram is best suited for logos.
Conclusion
We understood the example of a circle using an SVG tag. Then we saw the differences between the Ellipse and SVG tag in the above example. The main purpose to use SVG is its properties of the cx and cy coordinate axis which show the center direction and help to draw a circle by giving the best values.
489 Views
