Skip to content
Related Articles

Related Articles

SVG Attribute 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. Attributes are the things that give the SVG shape, color, etc it will make the SVGs as attractive as you need.

List of SVG Attributes:

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

Example: In this example, we will create two SVG texts with different attribute effects.

HTML




<!DOCTYPE html>
<html>
<body>
   <center>
      <h1 style="color:green;">
         GeeksforGeeks
      </h1>
      <strong>
         SVG Attribute 
      </strong>
      <svg viewBox="0 0 300 50"
           xmlns="http://www.w3.org/2000/svg">
         <text y="20"
               textLength="100%">
            A Computer Science portal.
         </text>
      </svg>
      <svg viewBox="0 0 450 50"
           xmlns="http://www.w3.org/2000/svg">
         <text x="170" y="50"
               text-decoration="line-through">
            GeeksforGeeks
         </text>
      </svg>
   </center>
</body>
</html>


Output: 

SVG Attribute

SVG Attribute


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!