NO BUG: SVG Logo don't work with color variables anymore

[sebastianberger]

I updated Bricks 1.83 to 1.9 today on the domain https://mehr-wert.com/ .

The logo uses the logo element and before it worked like a charme, when you use color variables in the svg code. So the colors changed as my themecode changed. Now the logo is completly black.

The svg logo: https://mehr-wert.com/wp-content/uploads/2023/08/mehrwert-logo-header-variabel.svg

In the logo the code is still there, like:

.st0{fill:var(--primary-dark);} .st1{fill:var(--primary-light); Any ideas what changed / happened?

[sebastianberger]

Additionaly: the change must happened with 1.8.4.

I tried to go back in versions and only with 1.8.3 it works. Till .4 it’s broken.

As it should be:

As it is till 1.8.4

[aslotta]

Hey Sebastian,

thanks for your report.

Before Bricks 1.8.4 an SVG within the logo element was output inline. That’s why it was working to target specific parts of the SVG using CSS.

However, with this approach things like the “logo inverse” setting did not work as expected (see related forum report).

So if you want to use an SVG as your logo and you need to style it using CSS please use a regular div (for the link) and an SVG element from now on. This approach does not have any downsides – actually you are even more flexible.

Best,

André

[sebastianberger]

@aslotta

related forum report

Perfect! Thanks André! Tested and works.

Out of curiosity. Do you have sources / knowledge about the impact of svg on the dom size?

It is very tempting to include all SVGs this way because then all graphics will automatically adapt to the theme.
But the SVG code is extremely long for an illustration.

[aslotta]

Hey Sebastian,

I asked a good, artificial friend of mine and that’s what he told me:

: Outputting SVG images inline instead of using tags can have several performance implications, depending on the specific use case and how you implement it. Here are some factors to consider:

1. Page Load Time:

Inline SVG: When you include SVG directly in your HTML code, it increases the HTML file’s size. This can lead to longer page load times, especially if you have multiple large SVGs.
Tag: Using tags with SVG files as the src attribute loads the SVG separately, which can be cached by the browser, reducing the initial page load time.

2. Caching:

Inline SVG: The SVG code is part of the HTML document, so it may not be cached separately. If the SVG content is reused across multiple pages, it will be reloaded with each page.
Tag: SVG files loaded via tags can be cached by the browser, improving load times for subsequent visits or pages using the same SVG.

3. Render Performance:

Inline SVG: Inline SVGs are rendered as part of the HTML document. Depending on their complexity, this can impact the initial rendering time of the page.
Tag: SVG files loaded via tags are rendered separately. This can potentially improve the overall page rendering performance, as the browser can parallelize rendering tasks.

4. Browser Compatibility:

Inline SVG: Some older browsers or versions may not handle inline SVG as well as modern ones. You may need to include additional polyfills or workarounds for compatibility.
Tag: Using tags for SVG is generally more widely supported across different browsers.

5. Maintenance and Code Separation:

Inline SVG: Placing SVG directly in HTML can be convenient for small, simple icons or illustrations. However, it can make the HTML code less maintainable, especially if you have numerous SVGs.
Tag: Using tags can keep your HTML cleaner and separate from SVG content, making it easier to manage and update.

6. Accessibility:

Inline SVG: You have more control over the accessibility of inline SVG content, but it requires you to set appropriate ARIA roles and attributes.
Tag: Using tags can have better default accessibility behavior, as browsers can treat them as images with alt text.

7. Browser DevTools:

Inline SVG: Debugging and inspecting inline SVGs within the HTML document can be more challenging in browser developer tools.
Tag: SVGs loaded via tags can be easily inspected and manipulated in developer tools.

In summary, the choice between inline SVG and tags depends on your specific requirements and trade-offs. For small, simple SVGs that don’t significantly impact page load times, inline SVG can be convenient. For larger, more complex SVGs, or when optimizing for performance and maintainability, using tags with separate SVG files is often a better choice.

Best,

André

[sebastianberger]

@aslotta

with separate SVG files is often a b

Yes, I could have asked our mutual friend.
Somehow not my morning today sorry! I drink times still nen construction coffee.

I have continued the conversation a bit.
I think for gimmicks like Darkmode / Colorthemes etc. you will not come if you do not want to tinker the DOM completely to work with image exchange.

Well you can not have everything.

[FranklyCo]

Hey! Jumping in on this one, it seems like the only element that outputs SVG inline is the Logo element (until this last update). And also, the SVG element does not accept dynamic data like the Logo element does. This could be an issue for some folks like us who rely on an Options page via MetaBox for website logos.

Questions:

1. Is there any way to add custom support for inline output of the dedicated SVG element?
2. Is there a way to add a new dynamic data field to SVG elements?

Thank you!