[Support request] Custom SVG is not being displayed

[Sascha]

Hi

I have added the SVG-code to the headline of a Top-Bar-Element, mark-up was already checked via the tool you have recommended.

In the top-bar of my site it should have been displayed in the left upper corner, but it’s not 🙁

Using a general icon from the built-in icon-library is working properly, only my custom code will not be accepted:

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M135.015 0c12.237 0 16.041 9.326 13.481 18.895l-8.35 31.168c8.814-8.301 19.808-10.933 30.106-11.02 24.453-.194 37.077 22.294 32.323 45.247-1.704 8.241-5.495 16.383-10.809 23.551-15.37 20.758-51.243 28.45-69.439 8.751-1.292 4.937-8.142 9.508-17.358 9.508h-9.154l13.871-51.743c1.769-6.582-2.183-11.97-8.776-11.971-4.962.001-9.629 1.744-12.834 3.195l-2.157 8.018-.231.928-10.228 38.14c-1.963 7.302-8.031 13.433-16.48 13.433H47.913l13.86-51.743.072-.305c1.573-6.449-2.351-11.665-8.838-11.666h-.011c-4.961.001-9.628 1.744-12.824 3.195l-12.625 47.074c-2.329 8.667-7.937 13.602-17.395 13.445H0l19.83-74.026c10.713-6.545 26.181-13.482 39.553-13.482 8.155 0 14.944 2.756 19.758 7.375 8.898-4.144 19.014-7.375 28.144-7.375 13.882 0 23.852 7.985 26.719 19.565.595-11.105-4.473-20.345-13.274-25.063L129.603 0h5.412zm24.571 61.081c-11.53.001-24.802 9.193-27.985 22.978-3.242 13.786 5.447 22.976 16.969 22.976 31.909 0 42.087-45.953 11.016-45.954z" fill="#FFF"/></svg>

Can you please help fixing this?

Credentials are provided below.

Thank you in advance and kind regards,
Sascha

[David]

Hi there,

the Icons in headlines were designed for square icons – so non square icons are a bit of a problem. Its something we’re looking into.

For now you will need to:

1. Select the Headline Block and in Advance > Additional CSS Class(es) add a custom class eg. headline-logo

2. Add this CSS to set your explicit sizes:

.gb-headline.headline-logo .gb-icon svg {
    width: 205px;
    height: 130px;
}

[Sascha]

Thanks, but now it’s too big 😂 In Headline-Block I have set the icon-size to 1em. So is the CSS-code blowing it up, correct? But when I change it to

.gb-headline.headline-logo .gb-icon svg {
width: 20px;
height: 13px;
}

it’s again hidden.

Would you mind to help me further 🙏

Thanks 😀

[Ying]

Hi Sascha,

Try change the SVG code to this:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 238 150">
  <path fill="currentColor" d="M135.015 0c12.237 0 16.041 9.326 13.481 18.895l-8.35 31.168c8.814-8.301 19.808-10.933 30.106-11.02 24.453-.194 37.077 22.294 32.323 45.247-1.704 8.241-5.495 16.383-10.809 23.551-15.37 20.758-51.243 28.45-69.439 8.751-1.292 4.937-8.142 9.508-17.358 9.508h-9.154l13.871-51.743c1.769-6.582-2.183-11.97-8.776-11.971-4.962.001-9.629 1.744-12.834 3.195l-2.157 8.018-.231.928-10.228 38.14c-1.963 7.302-8.031 13.433-16.48 13.433H47.913l13.86-51.743.072-.305c1.573-6.449-2.351-11.665-8.838-11.666h-.011c-4.961.001-9.628 1.744-12.824 3.195l-12.625 47.074c-2.329 8.667-7.937 13.602-17.395 13.445H0l19.83-74.026c10.713-6.545 26.181-13.482 39.553-13.482 8.155 0 14.944 2.756 19.758 7.375 8.898-4.144 19.014-7.375 28.144-7.375 13.882 0 23.852 7.985 26.719 19.565.595-11.105-4.473-20.345-13.274-25.063L129.603 0h5.412zm24.571 61.081c-11.53.001-24.802 9.193-27.985 22.978-3.242 13.786 5.447 22.976 16.969 22.976 31.909 0 42.087-45.953 11.016-45.954z"></path></svg>

You should not need CSS, with this SVG code, you should be able to adjust its size within the headline block’s icon settings.

[Sascha]

UPDATE: Works like a charm! Thanks! Just forgot to delete the CSS before replying 🙈

ORIG:

Thanks, Ying, I have changed the code, but as you can see on the page, it did not get that much smaller.

The icon should be as small as the other phone-icon on the right side of the same top-bar.

I have already tried with my graphic-program (not being a designer), but turned out a complete mess 😂

Any chance to help me out further?

Thank you in advance and kind regards,
Sascha

[Sascha]

One last question: I cannot use the “Icon Color”, why? How can I make the icon use the “Accent” color?

[Ying]

Because the color has been defined in the SVG code.

I’ve updated the SVG code:https://generatepress.com/forums/topic/custom-svg-is-not-being-displayed/#post-2078431

with the new code you should be able to set color within the Headline block.

[Author]

Posts