How to change SVG color ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.