How to set color CSS in .svg format
How to set color CSS in .svg format
SVG (Scalable Vector Graphics) is a common graphic format in web development, allowing for scalable https://coder-cafe.com/wp-content/uploads/2025/09/images without distortion. An SVG file is a vector graphic format based on XML. In real-world applications, we often need to display SVG icons or graphics on web pages and want to control the colors of SVG graphics using CSS.
About SVG Format
SVG is an XML-based graphic format that can be used to describe graphics and https://coder-cafe.com/wp-content/uploads/2025/09/images. Unlike traditional image formats such as JPEG and PNG, SVG is a vector graphic that can be infinitely scaled without distortion.
A simple SVG file looks like this:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
The above code creates an SVG canvas with a width and height of 100px, and a red circle with a radius of 40px in the center.
Controlling SVG Colors with CSS
Method 1: Controlling Color with the fill Attribute
In SVG, fill color is typically controlled by the fill attribute. We can change the fill color of SVG graphics by directly modifying the fill attribute through CSS.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
<style>
circle {
fill: green;
}
</style>
In the code above, the fill color of the circle in SVG is originally blue, but it is changed to green using fill: green; in CSS.
Method 2: Controlling the stroke color with the stroke attribute
The stroke color of shapes in SVG is typically controlled by the stroke attribute. We can change the stroke color of SVG shapes by directly modifying the stroke attribute using CSS.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" />
</svg>
<style>
circle {
stroke: red;
}
</style>
In the code above, the stroke color of the circle in SVG is originally black, but is changed to red using the CSS attribute stroke: red;.
Method 3: Using class and CSS to Control Color
In addition to using fill and CSS directly on SVG elements, In addition to controlling the color with the stroke attribute, we can also control the color of SVG by adding a class to the SVG element and then controlling the fill and stroke attributes of this class with CSS.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" class="custom-color" />
</svg>
<style>
.custom-color {
fill: purple;
stroke: orange;
}
</style>
In the above code, the circle in SVG is controlled by adding the custom-color class to control the fill and stroke colors. The color can be modified using the .custom-color in CSS.
Summary
During development, we often need to control the color of SVG graphics using CSS. This article introduces several common methods for controlling SVG colors using the fill and stroke attributes, as well as the class attribute. Regardless of which method you use, you can easily customize the colors of SVG graphics.
