NO BUG: SVG color fill bug

[intovortex]

Bricks Version: 1.5.7
Browser: Chrome 90
OS: windows

Hi,
I have this weird svg fill bug that I cannot solve. I tried using the code widget/svg widget/ icon widget but that didn’t solve my problem.

So when I use a color to fill an svg all the other svgs adopt that color. And when I remove the fill color they keep that color no matter what I do.
Some svg still work, but most of them keep that color. I can only resolve it by uploading some different svg.

and it is suppose to look like this

Kind regards

[timmse]

Hey,
Thank you for your report.

Please open your SVGs in a text editor and look at the inline style rules. Probably they all use the same rules and IDs and overwrite each other.

Please take a look at my explanation here:

SOLVED: Mysterious SVG Color Change on Frontend

Hi David, It is not a Bricks bug. The problem is that two SVGs (the logo and “Offizieller Google Fotograf”) share the same classes (e.g., .cls-4) with different styles (one without fill color, one with fill color white). So if you use these two SVGs together on, e.g., the home page, one class overwrites the other. There are two ways to solve the problem: depending on which program you use to save your SVGs, you may be able to use inline styles instead of classes. See Use Inline Style Attribu…

Best regards,
timmse

[intovortex]

Hello,
thank you very much that solved my problem! Most of my svg’s had the same classes, I switched the classes and now it works.

Have a nice day!
Kind regards

[vikmartin]

I’m having a similar problem with SVGs exported from Affinity Photo. I’ve opened up the file in a text editor but I can’t see any classes there. This is the only inline style:

style=“fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;”

Removing it didn’t make any difference

They have unique ids and there’s no reference to classes

I’ve given them different classes in Bricks and when I look in the chrome inspector it thinks the stroke and fill is applying but it’s not. There’s no reference to any other styles overriding it

This is the page - I want the icons in the footer to have a white fill:

https://test.vikmartin.co.uk/

Hope someone can help

Vik

[timmse]

Hi Vik,
Your SVG contains an embedded image, so you can’t change the stroke or fill. Instead of Affinity Photo, you should use Affinity Designer to export the SVG, so it becomes a “real” SVG.

Usually, you can scale (e.g. browser zoom) an SVG infinitely without any quality loss, but because of the embedded image, that’s not the case (see how pixelated it is):

[vikmartin]

Ah, ok that makes sense. Thanks