Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change SVG color?
Scalable Vector Graphics (SVG) are widely used for creating high-quality vector graphics that can be resized without losing resolution. One of the key advantages of SVG is the ability to change colors dynamically using CSS. This article will guide you through various methods to modify SVG colors effectively.
Syntax
/* Change fill color */
svg path {
fill: color-value;
}
/* Change stroke color */
svg path {
stroke: color-value;
}
Method 1: Using CSS Fill Property
The most common way to change SVG color is using the CSS fill property. You can target SVG elements using standard CSS selectors
<!DOCTYPE html>
<html>
<head>
<style>
.red-svg path {
fill: #ff0000;
}
.blue-svg path {
fill: blue;
}
</style>
</head>
<body>
<h3>Original SVG</h3>
<svg width="100" height="100">
<path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
</svg>
<h3>Red SVG</h3>
<svg class="red-svg" width="100" height="100">
<path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
</svg>
<h3>Blue SVG</h3>
<svg class="blue-svg" width="100" height="100">
<path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
</svg>
</body>
</html>
Three squares are displayed: a black original square, a red square, and a blue square.
Method 2: Targeting Specific Elements
You can target specific SVG elements using IDs or classes for more precise control
<!DOCTYPE html>
<html>
<head>
<style>
#circle-element {
fill: green;
stroke: purple;
stroke-width: 3;
}
.special-rect {
fill: orange;
}
</style>
</head>
<body>
<svg width="200" height="150">
<circle id="circle-element" cx="50" cy="50" r="30" fill="black"></circle>
<rect class="special-rect" x="100" y="20" width="60" height="60" fill="black"></rect>
</svg>
</body>
</html>
A green circle with purple border and an orange rectangle are displayed.
Method 3: Using CSS Variables
CSS custom properties allow for dynamic color changes and better maintainability
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-color: #3498db;
--secondary-color: #e74c3c;
}
.variable-svg .primary {
fill: var(--primary-color);
}
.variable-svg .secondary {
fill: var(--secondary-color);
}
</style>
</head>
<body>
<svg class="variable-svg" width="150" height="100">
<rect class="primary" x="10" y="10" width="60" height="60"></rect>
<circle class="secondary" cx="110" cy="40" r="30"></circle>
</svg>
</body>
</html>
A blue rectangle and a red circle are displayed using CSS custom properties.
Overriding Inline Styles
Sometimes SVG files contain inline styles that need to be overridden. Use !important or modify the SVG markup directly
<!DOCTYPE html>
<html>
<head>
<style>
.override-svg path {
fill: #27ae60 !important;
}
</style>
</head>
<body>
<svg class="override-svg" width="100" height="100">
<path style="fill: black;" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
</svg>
</body>
</html>
A green square is displayed, overriding the inline black fill color.
Color Value Options
| Format | Example | Description |
|---|---|---|
| Color name |
red, blue
|
Predefined CSS color names |
| Hexadecimal |
#ff0000, #00f
|
6-digit or 3-digit hex values |
| RGB | rgb(255, 0, 0) |
Red, green, blue values (0-255) |
| RGBA | rgba(255, 0, 0, 0.5) |
RGB with alpha transparency |
| HSL | hsl(0, 100%, 50%) |
Hue, saturation, lightness |
Conclusion
Changing SVG colors with CSS is straightforward using the fill and stroke properties. You can target elements with selectors, use CSS variables for dynamic theming, and override inline styles when necessary to achieve the desired visual appearance.
16K+ Views
