SOLVED: Mysterious SVG Color Change on Frontend

Bugs
1

Hello Guys
Any ideas what issue it could be?
In my Header Template in Bricksbuilder the SVG is display correctly
In Home Site the SVG change color as well as on frontend.
Note: i have no general settings for SVG Elements active. Colors automatically got overwrited with a class called (.cls-4).

Header-Template- SVG
Header-Template- SVG2872Ă—2228 241 KB

Startseite-Builder-svg
Startseite-Builder-svg1920Ă—1040 124 KB

Startseite-Builder-frontend-svg
Startseite-Builder-frontend-svg1920Ă—1489 134 KB

Startseite-Builder-svg-google
Startseite-Builder-svg-google1920Ă—1100 134 KB

Startseite-Builder-
Startseite-Builder-1920Ă—1489 147 KB

Thanks in advance
best greetz
David

Bricks Version: 1.1.3
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: (a link to a page that illustrates the issue would be really helpful)

[Please describe in as much detail as possible how we can replicate this bug]

2

Maybe that class is from another plugin?

1 Like
3

You can use chrome dev tools to inspect the SVG on the front end, it will tell you where the class and the styles that go with it are coming from. It shows you the file name on the right of the CSS rule.

1 Like
4

Hi David,
With such problems, it makes sense to send a link to the affected page to identify the problem quickly.

Best regards,
timmse

1 Like
5

Hi @timmse @wplit
Yes thats right sorry
seems to be a css class inline
in home site change the fill of SVG Startseite – 360Visionen
in header template it shows normal 360Visionen – Professioneller Dienstleister für 360Grad virtuelle Rundgänge und VR Touren

Thanks for your answers
Best greetz
David

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
7

Hello @timmse
thank you so much that you solved the problem!
this happenend as i saved the SVG in Illustrator, it added some classes in the SVG File.
I saved the file again with another App (Vectornator) , now it shows normal

Best Greetz
David

1 Like
8

Well usually Illustrator ads classes named “Cls1, Cls2, Cls3, etc” to all svgs so if you have more than one svg in the same page the classes override each other since they are the same. What I do is open the SVG saved by Illustrator in Notepad use find and replace / find “cls” replace with"xcls" (x= whatever you want to use to differentiate). Works perfect every time.