SVG

  • Last Updated : 02 Feb, 2022

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.

SVG Tutorial

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

My Personal Notes arrow_drop_up