SOLVED: Svg logo disappearing

Bugs
1

Bricks Version: 1.5
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: (mfi2.hilarion.cz)

When I use “logo” element and change display to “none” at mobile devices and add second svg logo for mobile devices, the both logos disappear.

When I use svg as a image (not logo), then it is OK.

There is the site I’m testing it: mfi2.hilarion.cz

When I inspect the element, I can see the svg parts of the logo. But there is no color of it…

update:
When I set url destination to svg image, it will disappear as well.

1 Like
2

Have you given the SVG a width?

3

I have height set and width to auto

4

You can also try to use an SVG sanitization plugin. If that issue occurs that means there might an issue with the SVG while you have exported. It happened to me when I used radial gradient in my SVG.

5

I have a radial gradient in my SVG. But I tried multiple sanitization methods and seems “clean”, but I still cannot see it in Bricks.

6

If that’s occurring, the only I have followed for my directional gradient (it’s not supported by SVG though)

  1. Export the logo or SVG where there is a gradient in @4x or @2x
  2. Then again import the exported image and replace that SVG part with the image. And then export as SVG. By doing that the quality doesn’t look bad in the header.

The icon in my logo was actually made with this technique.

Full Logo

7

Hi Michael,
Welcome to the forum, and thanks for reaching out!

There’s actually nothing wrong with the SVG - the problem is the classes within your SVGs, which share the same class names (e.g. .st0) , but different styles, so they override each other.

The logo is there, as you can see here:

Bildschirmfoto 2022-08-22 um 19.38.44
Bildschirmfoto 2022-08-22 um 19.38.441920×824 125 KB

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
8

Thank you very much. That was it. I saved it as a styles instead of classes and now it works as should. Thank you