How to Modify the Fill Color of an SVG Image when being Served as Background Image ?
Last Updated :
18 Sep, 2023
In this article, we will see how to modify the fill color of an SVG image when being served as a background image.
SVGs also known as scalable vector images, While being served as a background image we can change their background color easily. It has a number of approaches like using HTML only or using CSS or JavaScript. For starters let’s look at the easy approach.
Approaches to modify the fill color of SVG
- Using the fill color attribute
- Using CSS filters
Approach 1: Using the fill color attribute
Example 1: So all you need is an SVG file or its XML code and change its ‘fill’ attribute. Sounds easy? Try it with me. I have used an SVG file from svgrepo but I used its code here instead to show how the ‘fill’ attribute was changed.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>GFG-test</title>
<link rel="stylesheet"
href="styles.css" />
</head>
<body>
<div style="
background-image: url(svg.svg);
background-repeat: no-repeat;
background-position: center;
">
</div>
<center>
<svg class="sv-class"
height="800px"
viewBox="0 0 24 24"
fill="none"
<path opacity="0.4"
d=
"M22 8V16.19C22 19.83 19.83 22 16.19 22H7.81C4.17 22 2 19.83 2 16.19V8.01L22 8Z"
fill="#292D32" />
<path
d=
"M9.00094 17.7499C8.89094 17.7499 8.77094 17.7199 8.67094 17.6699C7.90094 17.2799 7.24094 16.6999 6.76094 15.9799C6.36094 15.3799 6.36094 14.6099 6.76094 14.0099C7.24094 13.2899 7.90094 12.7099 8.67094 12.3299C9.04094 12.1399 9.49094 12.2999 9.68094 12.6699C9.87094 13.0399 9.72094 13.4899 9.34094 13.6799C8.80094 13.9499 8.34094 14.3599 8.01094 14.8599C7.95094 14.9499 7.95094 15.0699 8.01094 15.1699C8.34094 15.6699 8.80094 16.0799 9.34094 16.3499C9.71094 16.5399 9.86094 16.9899 9.68094 17.3599C9.54094 17.5999 9.27094 17.7499 9.00094 17.7499Z"
fill="#292D32" />
<path
d=
"M15.2092 17.7499C14.9292 17.7499 14.6692 17.5999 14.5392 17.3399C14.3492 16.9699 14.4992 16.5199 14.8792 16.3299C15.4192 16.0599 15.8792 15.6499 16.2092 15.1499C16.2692 15.0599 16.2692 14.9399 16.2092 14.8399C15.8792 14.3399 15.4192 13.9299 14.8792 13.6599C14.5092 13.4699 14.3592 13.0199 14.5392 12.6499C14.7292 12.2799 15.1792 12.1299 15.5492 12.3099C16.3192 12.6999 16.9792 13.2799 17.4592 13.9999C17.8592 14.5999 17.8592 15.3699 17.4592 15.9699C16.9792 16.6899 16.3192 17.2699 15.5492 17.6499C15.4292 17.7199 15.3192 17.7499 15.2092 17.7499Z"
fill="#292D32" />
<path
d=
"M22 7.81V8L2 8.01V7.81C2 4.17 4.17 2 7.81 2H16.19C19.83 2 22 4.17 22 7.81Z"
fill="#292D32"
/>
</svg>
</center>
</body>
</html>
|
Output: This is the original image with fill: none propety.
.png)
SVG file used original version
Have a look at <path> in the code, here you can see some hex values for color, like so, fill=”#292D32″. Change it to any value you desire.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>GFG-test</title>
</head>
<body>
<div style="
background-image: url(svg.svg);
background-repeat: no-repeat;
background-position: center;
">
</div>
<center>
<svg class="sv-class"
height="800px"
viewBox="0 0 24 24"
fill="none"
<path
opacity="0.4"
d=
"M22 8V16.19C22 19.83 19.83 22 16.19 22H7.81C4.17 22 2 19.83 2 16.19V8.01L22 8Z"
fill="#A1CCD1" />
<path
d=
"M9.00094 17.7499C8.89094 17.7499 8.77094 17.7199 8.67094 17.6699C7.90094 17.2799 7.24094 16.6999 6.76094 15.9799C6.36094 15.3799 6.36094 14.6099 6.76094 14.0099C7.24094 13.2899 7.90094 12.7099 8.67094 12.3299C9.04094 12.1399 9.49094 12.2999 9.68094 12.6699C9.87094 13.0399 9.72094 13.4899 9.34094 13.6799C8.80094 13.9499 8.34094 14.3599 8.01094 14.8599C7.95094 14.9499 7.95094 15.0699 8.01094 15.1699C8.34094 15.6699 8.80094 16.0799 9.34094 16.3499C9.71094 16.5399 9.86094 16.9899 9.68094 17.3599C9.54094 17.5999 9.27094 17.7499 9.00094 17.7499Z"
fill="#292D32" />
<path
d=
"M15.2092 17.7499C14.9292 17.7499 14.6692 17.5999 14.5392 17.3399C14.3492 16.9699 14.4992 16.5199 14.8792 16.3299C15.4192 16.0599 15.8792 15.6499 16.2092 15.1499C16.2692 15.0599 16.2692 14.9399 16.2092 14.8399C15.8792 14.3399 15.4192 13.9299 14.8792 13.6599C14.5092 13.4699 14.3592 13.0199 14.5392 12.6499C14.7292 12.2799 15.1792 12.1299 15.5492 12.3099C16.3192 12.6999 16.9792 13.2799 17.4592 13.9999C17.8592 14.5999 17.8592 15.3699 17.4592 15.9699C16.9792 16.6899 16.3192 17.2699 15.5492 17.6499C15.4292 17.7199 15.3192 17.7499 15.2092 17.7499Z"
fill="#292D32" />
<path
d=
"M22 7.81V8L2 8.01V7.81C2 4.17 4.17 2 7.81 2H16.19C19.83 2 22 4.17 22 7.81Z"
fill="#292D32" />
</svg>
</center>
</body>
</html>
|
Output:
.png)
SVG file after modifying
Example: We can use filters of CSS that has functions like brightness(), sepia(), saturate(), etc. All you need to do is use these functions and change values according to what your result is supposed to look like. I applied some CSS code to the same SVG but added a class to the previous code too.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG-test</title>
<style>
.sv-class {
filter: brightness(0.7)
sepia(4)
hue-rotate(-72deg)
saturate(6);
}
</style>
</head>
<body>
<div style="
background-image: url(svg.svg);
background-repeat: no-repeat;
">
</div>
<center>
<svg class="sv-class"
height="800px"
viewBox="0 0 24 24"
fill="none"
<path opacity="0.4"
d=
"M22 8V16.19C22 19.83 19.83 22 16.19 22H7.81C4.17 22 2 19.83 2 16.19V8.01L22 8Z"
fill="#A1CCD1" />
<path d=
"M9.00094 17.7499C8.89094 17.7499 8.77094 17.7199 8.67094 17.6699C7.90094 17.2799 7.24094 16.6999 6.76094 15.9799C6.36094 15.3799 6.36094 14.6099 6.76094 14.0099C7.24094 13.2899 7.90094 12.7099 8.67094 12.3299C9.04094 12.1399 9.49094 12.2999 9.68094 12.6699C9.87094 13.0399 9.72094 13.4899 9.34094 13.6799C8.80094 13.9499 8.34094 14.3599 8.01094 14.8599C7.95094 14.9499 7.95094 15.0699 8.01094 15.1699C8.34094 15.6699 8.80094 16.0799 9.34094 16.3499C9.71094 16.5399 9.86094 16.9899 9.68094 17.3599C9.54094 17.5999 9.27094 17.7499 9.00094 17.7499Z"
fill="#292D32" />
<path d=
"M15.2092 17.7499C14.9292 17.7499 14.6692 17.5999 14.5392 17.3399C14.3492 16.9699 14.4992 16.5199 14.8792 16.3299C15.4192 16.0599 15.8792 15.6499 16.2092 15.1499C16.2692 15.0599 16.2692 14.9399 16.2092 14.8399C15.8792 14.3399 15.4192 13.9299 14.8792 13.6599C14.5092 13.4699 14.3592 13.0199 14.5392 12.6499C14.7292 12.2799 15.1792 12.1299 15.5492 12.3099C16.3192 12.6999 16.9792 13.2799 17.4592 13.9999C17.8592 14.5999 17.8592 15.3699 17.4592 15.9699C16.9792 16.6899 16.3192 17.2699 15.5492 17.6499C15.4292 17.7199 15.3192 17.7499 15.2092 17.7499Z"
fill="#292D32" />
<path d=
"M22 7.81V8L2 8.01V7.81C2 4.17 4.17 2 7.81 2H16.19C19.83 2 22 4.17 22 7.81Z"
fill="#292D32" />
</svg>
</center>
</body>
</html>
|
Output:
.png)
Using CSS
This piece of code is supposed to apply some visual effects like increasing the saturation, reducing brightness by roughly 70% of the original stuff and so on. For better reference try the following links. Hope it helps!
Share your thoughts in the comments
Please Login to comment...