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 in JQuery by Edureka
• 13,640 points
36 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 by Edureka
• 13,640 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 in JQuery by gaurav
• 13,460 points
9 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,700 points
472 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 in JQuery by Edureka
• 13,640 points
44 views
0 votes
1 answer
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,700 points
5,024 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,700 points
2,498 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,700 points
2,607 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,700 points
133 views
0 votes
1 answer

How to add class using jQuery?

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

answered Jun 1 in JQuery by Edureka
• 13,640 points
25 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 in JQuery by Edureka
• 13,640 points
26 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP