SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. SVG is a web standard for vector-based graphics. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized.
Why SVG?
- SVG images can be created and edited with any text editor.
- It can be searched, indexed, scripted, and compressed.
- SVG images are scalable.
- It can be printed with high quality at any resolution.
- Every element and every attribute in SVG files can be animated.
Now let’s understand SVG using an example.
Example: In this example, we will be drawing A SVG Circle in HTML.
HTML
<!DOCTYPE html>
<html>
<body>
<!-- svg tag is used here -->
<svg width="200" height="200">
<circle cx="80" cy="80" r="50"
stroke="black"
stroke-width="2"
fill="grey" />
</svg>
</body>
</html>
Output:
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above