Skip to content
Related Articles

Related Articles

How to change SVG color ?
  • Last Updated : 19 May, 2020

What is SVG Element?
SVG stands for Scalable Vector Graphics is a vector image format for two-dimensional graphics that can be used to create the animations and the SVG element is a container that defines a new coordinate system. The SVG document is defined by the XML format.

Significance of SVG documents: In today’s world, it is SVG that had made browser animations easier and handy. It is used in making 2D animations and graphics. An SVG document can be used to create 2D games in an HTML document. It has different methods to draw lines, shapes such as circle, rectangle, and paths, etc. It is resolution independent and also supports event handling in the document.

Syntax:

<svg></svg>

Example 1: In this example, we will use SVG element to draw a rectangle and color it.




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <title>
        How to change SVG color?
    </title>
</head>
  
<body style="text-align: center;">
  
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <div>
        <svg>
            <rect height="300" width="500"
                style="fill:#060">
        </svg>
    </div>
</body>
  
</html>

Output:



Example 2: In this example, we will use SVG element to draw a rectangle and color it.




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
  
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <title>
        How to change SVG color?
    </title>
</head>
  
<body style="text-align: center;">
  
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <div>
        <svg height="1000" width="500">
            <circle cx="250" cy="120" r="80"
                stroke="#000" stroke-width="5" 
                style="fill:#060">
        </svg>
    </div>
</body>
  
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :