SVG Image color CSS
Application Type
Mobile, Reactive

Hi
I added an image [SVG image], but I need to change it's color using 'fill' attribute, so how can access to it using CSS style

SVGSample.oml

Thank you Tousif,
I want to use the image widget rather than svg inline, it's easy to use, is there any solution?

Hi can you please elaborate it more, from where you are getting image, Is it a Url or you are getting binary data from Database or you are using OutSystems image widget in which you are using svg image

and If you could provide oml it would be great


Hi,
yes, I have 2 options
one I used an image widget using local svg image
soon will have the second option, that user will upload an svg image
so. I need a class to change the colors of svg [overwrite the fill class, if you see the image above, just I need to access to 'fill' class svg > g > path to fill]

You have to use some sort of JavaScript/jQuery to achive this

Please check this for reference

https://stackoverflow.com/questions/39133210/how-to-change-svg-fill-color-loaded-by-jquery

https://codepen.io/LukyVj/pen/zYpmme

Also check with this JS code snipet-


  document.getElementsByTagName("g")[0].style.fill = "blue";


Please check

 

Hi Diaa,

You can change the color of the SVG image.  

1, first Drag &  Drop the InlineSVG.

2,  click on the SVG code and paste your SVG code with the double-quotes(  " " ).

https://dmagre.outsystemscloud.com/SVGIcon/Home?_ts=637925544399544385

hope this helps you. also I have attached the OML with the solution.

Thanks,



SVGIcon.oml

Thank you Diksha,
I want to use the image widget, it's easy to use, is there any solution?

Hi Diaa,

As per my knowledge  this is the easy way to change SVG image color, and with Image widget i really don't feel we can do this without customizations. But Yes i can help you with the clear solution with OML, do help me with your OML so that i can make changes there and help you with the solution.

 


Hi, I used an image widget using local svg image 
I need a class to change the colors of svg [overwrite the fill class, if you see the image above, just I need to access to 'fill' class svg > g > path to fill]

Hi Diaa, 

I have added a new class in SVG Widget and added style for SVG Image but for the image widget, I think it is not possible to change color with the help of CSS.

I have attached the OML with the solution.  please let me know if it will helps you

Thanks



SVGIcon.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.