Image cut off in Firefox only?

[ddctc]

Hi! Please see the following screen capture image.

Our logo in our footer looks ok in Chrome and Safari, but is cut off in Firefox.

Thank you.

[Prasant]

Hello @ddctc,

Thanks for asking.

Looks like you haven’t uploaded the screenshot. Can you please upload again? May I request you to please share website URL for us to take a closer look?

Thanks.

[ddctc]

Sorry I was called away after posting. It is now attached to post as secure note thanks.

[paul.r]

Hi,

This is more of a browser issue rather than the theme.

If you go directly to your svg file in firefox - https://hotbrain.co/wp-content/uploads/hotbrain-logo-two-circles-white.svg

Then right click and select all, you will see that the image is cut off.

SVG not rendering properly in Firefox

SVG Guidelines

[ddctc]

Hi yes Firefox is cutting off the image, almost as though the view box is too small or something.

Thanks I guess I will have to look into this further…

[friech]

Hi There,

Maybe you can use a .png format image instead?

Thanks,

[ddctc]

I figured it out…asked the author of the SVG editing software I use.

He discovered that Firefox doesn’t support the letter-spacing property in SVGs, and recommended I turn the letters into a path… this worked.

See https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing#Browser_compatibility

[friech]

Cool, glad to hear that, and thank you for sharing. For sure other users will find your findings helpful.

Have a great day,
Cheers!