SVG Coloring

[ryanwwest]

Is there an easy way to color an SVG icon (or I guess PNG too) that has just one color (and keep a version of the color in both light and dark mode)? For example, this one as SVG: https://uxwing.com/base-station-icon/. I would like to use the same icon file several times in the same Excalidraw drawing but make some icons green, some red, etc.

I understand I could create differently colored SVGs but am curious if there is a cleaner and faster way to quickly do so in Excalidraw. I can technically change the transparency already which in a way affects the 'brightness', but not the hue or saturation.

This also might be a flawed way of doing things. If there's a better method, please let me know.

[nhaouari]

One way to change the color of an SVG icon is by converting it to an Excalidraw file. You can use the following link to do so: https://codesandbox.io/s/elastic-brook-4sfvz.

[ryanwwest]

Thanks for the suggestion! It unfortunately doesn't completely work for icons such as https://www.svgrepo.com/svg/76458/radio, because the resulting Excalidraw objects created can't easily be uniformly changed from the original color to a new color because the created objects are both black and white and both of them change to the new color if you group all the objects into one.

Perhaps there's an Excalidraw script that can change only the dominant color to another. Of course it would also be nice to have a script like this directly in Excalidraw if the color changed worked reliably afterwards.

[ryanwwest]

To demonstrate the issue after trying to set the resulting Excalidraw objects' 'background color' to a purple: