How to change SVG color ? Last Updated : 19 May, 2020 Comments Improve Suggest changes Like Article Like 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. html <!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. html <!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: Comment More infoAdvertise with us Next Article How to set the SVG background color ? T tarun007 Follow Improve Article Tags : Web Technologies HTML HTML-Misc Similar Reads How To Change Color Of SVG On Hover? SVG stands for Scalable Vector Graphics which is an XML form approach to create graphical elements using the code format of XML, that is, Extensive Markup Language. We can use CSS elements to add colors to svg, or change its properties and even add pseudo-class effects to it. In this article, we wil 7 min read How to set the SVG background color ? There are two types of images that can be used in the background and in both cases you can change the background color of the image. Raster: The images where each pixels represents the individual color within the image. So when we zoom in, the pixels start enlarging and hence after a certain point, 3 min read How to set the SVG background color ? There are two types of images that can be used in the background and in both cases you can change the background color of the image. Raster: The images where each pixels represents the individual color within the image. So when we zoom in, the pixels start enlarging and hence after a certain point, 3 min read How to set the SVG background color ? There are two types of images that can be used in the background and in both cases you can change the background color of the image. Raster: The images where each pixels represents the individual color within the image. So when we zoom in, the pixels start enlarging and hence after a certain point, 3 min read How to change svg icon colors with Tailwind CSS ? SVG stands for Scalable Vector Graphics and is an XML-based ( can be edited ) vector image format. SVG is commonly used for icons, animations, interactive charts, graphs, and other dynamic graphics in the browser. As it is XML-based, you can easily edit or change the SVG icon colors with Tailwind. A 3 min read How to Change SVG Icon Color on Click in JavaScript ? SVG stands for Scalable Vector Graphics and is a vector image format for two-dimensional images that may be used to generate animations. The XML format defines the SVG document. You can change the color of an SVG using the below methods: Table of Content Using the setAttribute()Using style.fill prop 2 min read Like