What I’m trying to do:
Display an SVG in an image component with a transparent background
What I’ve tried and what’s not working:
Setting the source to the SVG gives a black background as per the right image whereas converting the SVG to a PNG gives the correct result but adds a step in the workflow (see left image)
Am I missing something here?
Have you tried other browsers? If the results are different for different browsers I think that hints at either the CSS not supporting RGBA , or just not supporting it for the way your specific SVG files are implementing it.
(For anyone who doesn’t know, the A channel of rgba is the transparency/opacity “color” channel)
If not, then you have another problem unrelated to above. It might be a bug? OR you might be able to just override the CSS with a role that better interfaces with your SVGs across all browsers?
Or everything that I said could be out of date and all the browsers handle it the same now, I only remember this being a problem in the past but I don’t really use them often.
Thanks for the tips. I did a bit more investigating and it looks like if the SVG is selected using the upload option (ie pick file from your local drive by clicking the up arrow in the source attribute of the Image) the transparent background comes up as black.
If the SVG is loaded from the Assets folder by setting the source to a path then the background is transparent as expected.
Note to load an SVG you have to select *All File Types, so maybe this filetype isn’t supported using the upload option…
