SVG CSS change fill color

SVG CSS Change Fill Color

In web development, SVG (Scalable Vector Graphics Scalable Vector Graphics (SVG) are widely used in icons, charts, animations, and other fields. SVG is essentially a vector graphic formatted in XML, offering the advantage of being infinitely scalable without distortion. Within SVG, you can use CSS styles to modify attributes like fill and border colors, allowing you to alter the appearance of SVG graphics simply by modifying CSS styles.

This article will detail how to change the fill color of SVG graphics using CSS, including both inline and external SVGs.

Inline SVG

Inline SVG refers to embedding SVG code into an HTML document. CSS can be used directly in the HTML to change the SVG’s style.

Basic Usage

First, we need to embed the SVG code in the HTML document. For example:

<svg  viewBox="0 0 24 24" width="100" height="100"> 
<rect x="0" y="0" width="24" height="24" fill="red"/> 
</svg> 

In the code above, we define a square with a width and height of 24 and set its fill color to red. Next, we can use CSS to modify the fill color of the SVG shape:

rect {
fill: blue;
}

We can easily change the fill color of the SVG square by setting the fill attribute to a different color value.

Using Class Selectors

In addition to directly selecting SVG elements, we can also add class names to SVG elements and then use class selectors to change their styles.

<svg  viewBox="0 0 24 24" width="100" height="100"> 
<rect x="0" y="0" width="24" height="24" class="my-rect"/> 
</svg> 

.my-rect { 
fill: green; 
} 

This way, we’ve added the my-rect class to the SVG square element and changed its fill color to green using CSS.

External SVG

External SVG means saving the SVG code in a separate SVG file and then importing the SVG image through the <img> tag or CSS background-image.

Using the <img> tag

Include the external SVG file in the HTML document using the <img> tag, as shown below:

<img src="rectangle.svg" alt="Rectangle" class="svg-image"> 

In the external SVG file rectangle.svg, we define a square shape identical to the inline SVG, as shown below:

<svg  viewBox="0 0 24 24" width="100" height="100"> 
<rect x="0" y="0" width="24" height="24" fill="red"/> 
</svg> 

Similarly, we can use CSS to change the fill color of the SVG shape corresponding to the <img> tag:

.svg-image { 
filter: hue-rotate(90deg); 
} 

The above code will rotate the color of the SVG shape 90 degrees, thereby changing its fill color.

Using background-image

In addition to using the <img> tag, we can also use the CSS background-image property to include an external SVG file.

<div class="svg-background"></div>

.svg-background {
width: 100px;
height: 100px;
background-image: url('rectangle.svg');
}

Through the above code, we use the external SVG file rectangle.svg as the background image of the div element. Its fill color can also be changed using CSS.

Summary

This article introduced how to change the fill color of SVG shapes using CSS, including both inline and external SVGs. By simply modifying CSS styles, we can easily change the color of SVG shapes, making them more vivid and colorful on web pages.