SOLVED: SVG not rendering properly - wrong colors

Bugs
1

There seems to be something wrong with SVG handling in Bricks. I’m using the icon element and no matter what, the colors are reversed on the SVG. The outside circle is supposed to be white, and the phone inside is supposed to be red but the element renders opposite.

I’ve gone through the CSS and other settings and there is no reason I can see why this would be. Just to confirm, I have another icon that is similar (same colors and renders properly) and when I place this particular SVG in the same container as the other, this one is still reversed. If I use an Image element, the colors are fine.

Here is the base64 of the SVG in question.

PHN2ZyBpZD0iTGF5ZXJfNCIgZGF0YS1uYW1lPSJMYXllciA0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIgMTkyIj48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDo3LjAwcHg7fS5jbHMtMXtzdHJva2U6I0VEMUUyNTt9LmNscy0ye3N0cm9rZTojRkZGRkZGO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDYuMTYsMTA5LjE2YTcuODksNy44OSwwLDAsMCwxMC43NC4yOWwuNDMtLjQyLjA3LS4wOGE1LjUzLDUuNTMsMCwwLDEsNy44Mi0uMTZsOS4wOSw4LjcyYTUuNTIsNS41MiwwLDAsMSwuMTYsNy44MmwtMi4yNiwyLjM1YTI1LjU2LDI1LjU2LDAsMCwxLTEzLjYzLDcuNGgwYTI1LjYzLDI1LjYzLDAsMCwxLTIyLjUzLTYuNjVMODEuMTcsMTE0LjE4LDYzLjc5LDk3LjQ0YTI1LjUsMjUuNSwwLDAsMS03LjUzLTIyLjFoMGEyNS40OCwyNS40OCwwLDAsMSw2LjgyLTEzLjkxbDMuMTItMy4yN0E1LjU0LDUuNTQsMCwwLDEsNzQsNThsOSw4LjY1YTUuNjQsNS42NCwwLDAsMSwuMTcsOGgwYy0uMTQuMTQtLjI3LjI5LS40LjQ0LTIuNjYsMy4xNS0yLjY0LDguMjcuMzQsMTEuMTJaIj48L3BhdGg+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTQ1LjQzLDI3LjU1QTg0LjEyLDg0LjEyLDAsMSwxLDEyNSwxNi43Ij48L3BhdGg+PC9zdmc+

2

Fixed. Turns out there is CSS as part of the SVG files I am using. The SVG files came from the same source and they re-used the same CSS selectors in all the files. The selectors of one SVG would override those of the next.

So, not the fault of Bricks but the fault of the SVG itself thanks to sloppy color definitions by the vendor.