-- UPDATE -- You can now set the colour to use the Global Colour!!! Instead of fill="FFFFFF" Use fill="var( --e-global-color-accent)" Or fill="var( --e-global-color-primary)" Or fill = fill="var( --e-global-color-secondary)"
I changed this code to "var( --e-global-color)" which enables me to choose all the global colours. Not just the accent colour. By the way, I did this for a bunch of Google Material Design icons which I uploaded to Wordpress (Elementor), and it works perfectly.
Hey, that was quick! ;) So, a lot of it is down to how the SVG is created. In your robot example, it's all about the "fill" but, if there are strokes/paths it all gets more complicated! In your example, just try removing the "fill='#fgfgggg'" altogether and see if you're then able to change the colour in Elementor - you'd need to edit the code in notepad or whatever rather than use the HTML widget - that was clever btw!
This is how Elementor SHOULD process svg. Not as image files, but as a text file. It should then change the fill color, size etc for you as you play with the sliders.
Errmm ... Elementor does process SVG as SVG and not as an image. The exception to that rule would only be if a raster image was embedded in the SVG which does happen if, say, a user grabs a jpg and somehow finds a "convert to SVG" tool. In that case, the image isn't converted, as such, simply given an SVG wrapper. In this way, some SVG files can be accidentally mahoosive!
I tried uploading and svg exported with Adobe Illustrator. BUT Illustrator svg export with inline styles, SO only have to Remove this line opening the svg file in notepad: .st0{fill:#1CAAB8;} .st1{fill:#FCFCFC;} and removed all class tags from paths class="st1" ¡THEN you can upload the svg to Elementor and change color as you need, super cool!
You can use color change if you upload as a plain svg. Not sure how you made this. In my situation, I use inkscape which adds additional class layers, this prevents elementor from updating the fill. However, if I save it as a plain SVG Elementor will allow you to update the fill. Hope this helps. I believe the same goes for Illustrator SVGs.
-- UPDATE -- You can now set the colour to use the Global Colour!!!
Instead of fill="FFFFFF"
Use fill="var( --e-global-color-accent)"
Or fill="var( --e-global-color-primary)"
Or fill = fill="var( --e-global-color-secondary)"
I changed this code to "var( --e-global-color)" which enables me to choose all the global colours. Not just the accent colour. By the way, I did this for a bunch of Google Material Design icons which I uploaded to Wordpress (Elementor), and it works perfectly.
If you delete the fill line now will be able to edit it directly from Elementor
jeeeez, took me years to finally learn this simple task, thank you!
You saved me once again☺... I was looking for "how to set SVG position in Centre" ..... THNAKS 👍
You can change svg color/size with the settings when you import it as a custom icon font. But thats a whole different approach.
Hey, that was quick! ;) So, a lot of it is down to how the SVG is created. In your robot example, it's all about the "fill" but, if there are strokes/paths it all gets more complicated! In your example, just try removing the "fill='#fgfgggg'" altogether and see if you're then able to change the colour in Elementor - you'd need to edit the code in notepad or whatever rather than use the HTML widget - that was clever btw!
Indeed - looking into that :)
This is how Elementor SHOULD process svg. Not as image files, but as a text file. It should then change the fill color, size etc for you as you play with the sliders.
Errmm ... Elementor does process SVG as SVG and not as an image. The exception to that rule would only be if a raster image was embedded in the SVG which does happen if, say, a user grabs a jpg and somehow finds a "convert to SVG" tool. In that case, the image isn't converted, as such, simply given an SVG wrapper. In this way, some SVG files can be accidentally mahoosive!
I tried uploading and svg exported with Adobe Illustrator. BUT Illustrator svg export with inline styles, SO only have to Remove this line opening the svg file in notepad:
.st0{fill:#1CAAB8;} .st1{fill:#FCFCFC;}
and removed all class tags from paths
class="st1"
¡THEN you can upload the svg to Elementor and change color as you need, super cool!
This worked great for me, thanks
Thanks for this video... i was able to fix it with fill="inherit" for an icon in a button where i want it to change color on hover along with the text
You can use color change if you upload as a plain svg. Not sure how you made this. In my situation, I use inkscape which adds additional class layers, this prevents elementor from updating the fill. However, if I save it as a plain SVG Elementor will allow you to update the fill. Hope this helps. I believe the same goes for Illustrator SVGs.
Thanks! Do you have any idea of how to do this working with Product Images in WooCommerce?
Not tried that myself yet