How to change color of SVG image using CSS and jQuery ?

An SVG (Scalable Vector Graphics) image is a vector-based image format, scalable without loss of quality. To change its color using CSS or jQuery, you can target the SVG's fill or stroke properties via CSS, or manipulate these properties dynamically with jQuery.

These are the following approaches to changing the styles of SVG images using CSS:

Using CSS Classes and jQuery

The CSS classes and jQuery approach involves assigning a class to the SVG element and using jQuery to trigger a click event. Upon clicking, a JavaScript function generates a random color, which is applied to the SVG's fill attribute using jQuery’s .css() function.

Example: Here we use jQuery to change the color of an SVG circle upon clicking. A random color is generated and applied to the circle's fill using CSS, with a smooth transition effect.

Output:

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: Here we are using CSS variables and jQuery to dynamically change an SVG’s color. Clicking the SVG triggers a jQuery event, generating a random color and assigning it to the --icon-fill variable.

Output: