SOLVED: Mysterious SVG Color Change on Frontend

Bugs
6

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:

  1. 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 Attributes on SVG Elements to Avoid Overwriting Styles | Sean C Davis
  2. download one of the SVGs, open it in a text editor of your choice and replace all classes with unique class names that do not appear in the other SVG.

Best regards,
timmse

1 Like