How to set SVG image color with CSS

How to Set SVG Image Colors with CSS

SVG (Scalable Vector Graphics) is an XML-based vector graphics format that provides high-quality, scalable https://coder-cafe.com/wp-content/uploads/2025/09/images for web pages. In web development, CSS can be used to control and change the style of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images, including setting colors. This article will explore in detail how to use CSS to set the colors of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images.

What is an SVG Image?

SVG is a vector graphics format. Unlike pixel-based graphics, it uses mathematical descriptions to define graphics, which makes them appear clear and sharp across devices of varying sizes without pixelation. SVG https://coder-cafe.com/wp-content/uploads/2025/09/images are based on paths, shapes, and text and can be edited and created using a text editor.

In web development, SVG https://coder-cafe.com/wp-content/uploads/2025/09/images are typically embedded inline within HTML documents. You can use the src attribute in the <img> tag to point to the SVG file, or you can embed the SVG code directly in HTML. SVG can also be styled and interacted with using CSS and JavaScript.

SVG Image Color Settings

SVG image colors can be set in a variety of ways, including inline styles, CSS styles, and class names. Each of these methods is described below.

Inline Styles

Within SVG code, you can use inline styles to define the color of an image. This method involves setting the fill attribute directly within the element tag to specify the fill color, or the stroke attribute to specify the stroke color.

<svg width="100" height="100" > 
<rect x="10" y="10" width="80" height="80" style="fill: red; stroke: blue; stroke-width: 2;"/> 
</svg> 

In the example above, the rect element represents a rectangle. The style attribute sets the rectangle’s fill color to red (fill: red) and its stroke color to blue (stroke: blue).

CSS Styles

In addition to using inline styles, you can also use external CSS style sheets to control the colors of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images. You can set the color style of SVG elements using selectors and attributes.

.svg-img {
fill: green;
stroke: yellow;
} 

<svg class="svg-img" width="100" height="100" > 
<rect x="10" y="10" width="80" height="80"/> 
</svg> 

In the example above, the .svg-img selector in the CSS stylesheet sets the fill property to green and the stroke property to yellow. In the SVG code, the class attribute is used to apply this style to the svg element.

Class Name Control

In addition to setting color styles directly in CSS, you can also control the color of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images by adding class names. This makes it easy to change the color style of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images in different scenarios.

.red { 
fill: red; 
} 

.blue { 
fill: blue; 
} 

<svg class="red" width="100" height="100" > 
<rect x="10" y="10" width="80" height="80"/> 
</svg> 

<svg class="blue" width="100" height="100" > 
<rect x="10" y="10" width="80" height="80"/> 
</svg> 

In the above example, by defining the .red and .blue class names, we set the SVG image’s fill color to red and blue, respectively. These class names can then be used in the SVG code to control the color.

How to Set SVG Image Colors

In actual development, setting the color of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images depends on different needs and scenarios. Below are some common situations and solutions.

Monochrome SVG Images

For monochrome SVG https://coder-cafe.com/wp-content/uploads/2025/09/images, you can use the fill attribute to set the fill color and the stroke attribute to set the stroke color. This makes it easy to control the color of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images.

<svg width="100" height="100" > 
<rect x="10" y="10" width="80" height="80" fill="#ff0000" stroke="#000000" stroke-width="2"/> 
</svg> 

In the example above, the fill color is set to red by setting the fill attribute in the rect element, and the stroke color is set to black by setting the stroke attribute.

Multi-Color SVG Images

For multi-color SVG https://coder-cafe.com/wp-content/uploads/2025/09/images, you can use multiple graphic elements in the SVG code to represent different parts, and then set different colors for each part.

<svg width="100" height="100" > 
<rect x="10" y="10" width="30" height="80" fill="red"/> 
<rect x="40" y="10" width="30" height="80" fill="green"/> 
<rect x="70" y="10" width="30" height="80" fill="blue"/> 
</svg> 

In the above example, three rectangle elements are used to represent different colored areas, set to red, green, and blue respectively.

Dynamic Color Changes

Using CSS and JavaScript, you can dynamically change the color of an SVG image. For example, you can use JavaScript to change the color of an SVG image on mouse hover.

<svg id="svg-img" width="100" height="100" > 
<rect x="10" y="10" width="80" height="80"/> 
</svg> 

<script> 
const svgImg = document.getElementById('svg-img'); 

svgImg.addEventListener('mouseover', function() { 
svgImg.querySelector('rect').setAttribute('fill', 'pink'); }); 
</script> 

In the above example, when the mouse hovers over the SVG image, JavaScript code changes the fill color of the rect element to pink.

Summary

Through this article, we learned how to set the color of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images using CSS. Whether using inline styles, CSS style sheets, or class names, you can flexibly set and adjust the color of SVG https://coder-cafe.com/wp-content/uploads/2025/09/images. In actual development, choosing the appropriate method based on your needs can make SVG https://coder-cafe.com/wp-content/uploads/2025/09/images more vivid and rich.