How to Change SVG Colors [Elementor Tutorial]

In this Elementor tutorial I will show you 4 different ways to change the colors on your SVG images.
Timestamps:
0:00 Introduction
0:28 Icon Widget Example
2:30 Image CSS Filter Example
4:14 HTML Fill Color Example
8:40 HTML CSS Filter Example
CSS Code:
wickydesign.com/how-to-change...
CSS Filter Generator Link:
tools.codefort.ru/csstools/cs...
Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!
WORDPRESS PLUGINS:
✔️ Elementor: wickydesign.com/get-elementor
✔️ Crocoblock: crocoblock.com/?ref=2562
✔️ Ultimate Add Ons: ultimateelementor.com/pricing...
✔️ Elementor Custom Skin: gumroad.com/a/545789043
✔️ All In One SEO: www.shareasale.com/r.cfm?b=14...
BUSINESS TOOLS:
✔️ Dubsado: www.dubsado.com/?c=wickydesign
✔️ MailerLite: www.mailerlite.com/a/jrdqblbizo
✔️ Wave: waveapps.com/
GRAPHICS:
✔️ Adobe: clkuk.tradedoubler.com/click?p...
WEBSITE HOSTING:
✔️ KnownHost: www.knownhost.com/?aid=71319c26
------
For more information regarding our web design and branding services, please visit wickydesign.com
#ElementorTutorial #Elementor #SVG

[@JubranZakri]

You only have to Remove this line opening the svg file in notepad:
.st0{fill:#000000;} .st1{fill:#FFFFFF;} and it will be colored from elementor directly.

[@romanf]

it works, thanks a lot!

[@maximilianoperaita5256]

top comment

[@PantheraPress]

Do you know how to stop SVGs from changing the color of other SVGs? They upload the correct color but SVGs seem to inherit the color from one another making them ALL the same color. I don't want to manually adjust each one as they have more than one color.

[@WickyDesign]

You can use a CSS class for each unique SVG. For example you can use: .fish svg{fill:#5D9CC5;} if you have a class named fish.

[@PantheraPress]

@@WickyDesign Ah ok. That means I'd have to adjust every single one which is what I'm trying to avoid - they have gradients, I'm trying to stop them from inheriting color from one another so they will show up as they are already colored. It'll be faster for me to just turn them into .pngs or use an image box instead of an icon box vs adding code to every single one.

[@demonwares]

great video, but how could I do this with a white transparent PNG image?

[@WickyDesign]

Thanks. You won't be able to use this technique when using PNG images.

[@XeiDaMoKaFE]

what is that extension ? can I use it for diferent websites ?

[@WickyDesign]

What extension are you referring to?

[@XeiDaMoKaFE]

@@WickyDesign that elementor thingy , I'll research about it today , I do play a browser game and I'd like to edit some stuff and that elementor thing looks like it does the thing
I want to mousedown an element and call a pop-up with a div of another page of the same domain

[@PrashantKumar-yw6eq]

how will i fill cover to svg image if I have kept that svg image in tag

[@WickyDesign]

I don't think I understand the question?

[@PrashantKumar-yw6eq]

@@WickyDesign i am using tag with src=svgimage path
now i want to fill different color to the svg image on hover?

[@WickyDesign]

I understand, using the tag most likely won't work well with SVG hover. There's a few different options that might work better. You can use this link to see good examples: css-tricks.com/change-color-of-svg-on-hover/

[@PrashantKumar-yw6eq]

@@WickyDesign Hello
Need your help Please
If you are familiar with chakra UI
I want to toggle theme in react Class based components
I have searched a lot But can not get any hint
Can you please look forward to help me with this Please!!

[@WickyDesign]

@@PrashantKumar-yw6eq Sorry we don't have any experience with chakra UI.