How to change color of SVG image using CSS jQuery ?
Last Updated :
06 Mar, 2024
In this article, we will see how we can replace a text element with an SVG image and then manipulate its color using CSS. SVG images are a vital way to create and display graphics on the web. When we combine the CSS and jQuery, we can create different types of attractive effects like changing the color of SVG images without reloading the page.
These are the following approaches to changing the styles of SVG images using CSS:
- CSS Classes and jQuery
- CSS Variables and jQuery
Using CSS Classes and jQuery
In this approach, we are using CSS classes and jQuery to change the color of the SVG image. In this example, we are using the circle element, and when we click on it a jQuery event is triggered. When the image is clicked, a random color is generated using JavaScript.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.icon-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.icon {
width: 220px;
height: auto;
cursor: pointer;
transition: fill 0.3s;
}
h1 {
color: green;
margin-bottom: 5px;
}
h3 {
margin-top: 10px;
font-size: 16px;
color: #333;
}
</style>
<script src=
</script>
</head>
<body>
<div class="icon-container">
<h1>GeeksforGeeks</h1>
<svg class="icon"
viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" />
</svg>
<h3>
Changing Color using CSS Classes and jQuery
</h3>
</div>
<script>
$(document).ready(function () {
$('.icon').on('click', function () {
let randomColor =
'#' + Math.floor(Math.random() * 16777215)
.toString(16);
$(this).find('circle').css('fill', randomColor);
});
});
</script>
</body>
</html>
|
Output:
- In this example, jQuery updates the color of the SVG element with each click. When we click on the component, every time a new color is been filled within the component.
- We have used the jQuery CDN that links to jQuery simplifies the interactions with the HTML elements, and also makes it easier to manipulate the SVG using JavaScript for this function.
- In the JavaScript code, there is a click event listener for elements with the class “icon” When we click on the SVG, the event is been triggered and with the event handler, a random color is been assigned to the SVG image by using the ‘fill’ attribute of the ‘<circle>’ element inside the SVG using jQuery’s ‘.css()’ function.
Using CSS Variables and jQuery
In this approach, we are using CSS Variables and jQuery to dynamically change the color of the SVG images. The color is assigned to a CSS variable using the setProperty()‘. then clicking the SVG jQuery triggers the function to generate the random color.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.icon-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 20px;
}
.icon {
width: 120px;
height: 120px;
cursor: pointer;
transition: fill 0.3s;
fill: var(--icon-fill, initial);
}
h1 {
color: green;
margin-bottom: 5px;
}
h3 {
font-size: 16px;
color: #333;
}
/* Attractive SVG Background */
.icon-background {
fill: url(#gradient);
}
#gradient {
fill: none;
}
</style>
<script src=
</script>
</head>
<body>
<div class="icon-container">
<h1>GeeksforGeeks</h1>
<h3>
Changing Color using CSS Variables and jQuery
</h3>
</div>
<svg class="icon"
viewBox="0 0 24 24">
<defs>
<linearGradient id="gradient" x1="0%"
y1="0%" x2="100%" y2="100%">
<stop offset="0%"
style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%"
style="stop-color:#FF5733;stop-opacity:1" />
</linearGradient>
</defs>
<rect class="icon-background" x="0" y="0"
width="100%" height="100%" rx="12" />
<rect x="4" y="4" width="16" height="16" />
</svg>
<script>
$(document).ready(function () {
$('.icon').on('click', function () {
let randomColor =
'#' + Math.floor(Math.random() * 16777215)
.toString(16);
document.documentElement.style.setProperty(
'--icon-fill', randomColor);
});
});
</script>
</body>
</html>
|
Output:
- In this example, by using the variable we are dynamically changing the SVG image’s color appearance through the custom property.
- This is the efficient way to modify the SVG attribute rather than direct manipulation of elements.
- We have used the “–icon-fill” CSS variable which is responsible for setting the fill color of the SVG elements.
- Here, when the click is been triggered, the script generates the random color value in the hexadecimal format.
- This color value has been assigned to the “–icon-fill” CSS variable using the ‘setProperty()’ function.
Share your thoughts in the comments
Please Login to comment...