Open In App

How to change SVG color ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 19 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads