Skip to content
Related Articles

Related Articles

SVG Property Complete Reference

Improve Article
Save Article
  • Last Updated : 01 Apr, 2022
Improve Article
Save Article

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. Properties are used for passing the value to the element, there are lots of properties that can be used in SVG elements.

List of SVG Properties:

Below example will give you a brief idea that how to use the SVG Property:

Example: In this example, we will see two diagrams one will be an ellipse and another will be a circle.

HTML




<!DOCTYPE html>
<html>
<body>
   <center>
      <h1 style="text-align: center;
                 color:green;">
         GeeksforGeeks
      </h1>
         <b> SVG Property </b>
      <div style="width: 600px;">
      <div style="float: left; ">
         <svg width="200" 
             height="200" 
             xmlns="http://www.w3.org/2000/svg">
            <ellipse cx="100" 
                     cy="100"
                     rx="100"
                     ry="60"
                     id="ellipse"
               onclick="outputSize();"/>
         </svg>
      </div>
        
      <div style="float: right;">
         <svg xmlns="http://www.w3.org/2000/svg" 
              viewBox="0 0 250 250"
              width="250"
              height="250">
            <circle cx="150" 
                    cy="100" 
                    r="50"
                    fill="green" 
                    id="gfg" 
                    onclick="clickCircle();"/>
         </svg>
      </div>
      </div>
   </center>
</body>
</html>


Output:

SVG Property

SVG Property 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!