How to change color of SVG image using CSS jQuery SVG image replacement

0 votes

This is a self Q&A of a handy piece of code I came up with.

Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are various methods of using JS SVG frameworks, but they are overly complicated if all you are doing is making a simple icon with a rollover state.

So here is what I came up with, which I think is by far the easiest way to use SVG files on a website. It takes its concept from the early text-to-image replacement methods, but as far as I am aware has never been done for SVGs.

This is the question:

How do I embed an SVG and change its color in CSS without using a JS-SVG framework?

May 31, 2022 in JQuery by Edureka
• 13,690 points
22,184 views

1 answer to this question.

0 votes

Edit your SVG file, add fill="currentColor" to svg tag and make sure to remove any other fill property from the file. Note that currentColor is a keyword (not a fixed color in use). After that, you can change the color using CSS, by setting the color property of the element or from it's parent.

answered Jun 1, 2022 by Edureka
• 13,690 points

Related Questions In JQuery

0 votes
1 answer

How to change CSS using jQuery?

You can change CSS using the jQuery ...READ MORE

answered Jun 10, 2022 in JQuery by gaurav
• 23,260 points
687 views
0 votes
1 answer

How to change options of <select> with jQuery?

Hello @kartik, You can remove the existing options ...READ MORE

answered Nov 25, 2020 in JQuery by Niroj
• 82,840 points
6,656 views
0 votes
0 answers

How to replace innerHTML of a div using jQuery?

How could I achieve the following: document.all.regTitle.innerHTML = ...READ MORE

May 31, 2022 in JQuery by Edureka
• 13,690 points
1,789 views
0 votes
1 answer

How to get all css properties and events of a html element with jquery or other libraries?

You can get the computed value of ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
1,090 views
0 votes
1 answer

How to import jQuery UI using ES6/ES7 syntax?

Hii, Add a alias in webpack config: resolve: { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
8,007 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,840 points
4,276 views
0 votes
1 answer

How do I iterate through children elements of a div using jQuery?

Hello @kartik, Use children() and each(), you can optionally pass a ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,840 points
5,561 views
0 votes
1 answer

How to Get the real width and height of an image with JavaScript?

Hello, Webkit browsers set the height and width ...READ MORE

answered Nov 25, 2020 in JQuery by Niroj
• 82,840 points
705 views
0 votes
1 answer

How to add class using jQuery?

Add a class name to the first ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,690 points
3,224 views
0 votes
1 answer

How to make a simple modal pop up form using jquery and html?

Create A Modal <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button> ... <div ...READ MORE

answered Jun 2, 2022 in JQuery by Edureka
• 13,690 points
7,604 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP