SVG doesn't fill full space

Hi all,

Just today I’ve got to grips with embedding SVG… But the issue I’ve now got is that it’s creating a line beneath the logo that I can’t seem to get rid of! I can’t find a reason for it in webflow, and I can’t find a reason for it in he SVG code (I’ve tinkered with it a lot!)

I’ve tried work-arounds such as adding negative margins and so on, but that doesn’t work when the site is scaled on different sized screens; eventually the gap shows back up, or crops part of the logo.

Any help is of course much appreciated.

Kind regards,
Chris


Here is my site Read-Only: https://preview.webflow.com/preview/rl-brand-site?utm_medium=preview_link&utm_source=dashboard&utm_content=rl-brand-site&preview=4578899192b0294bc0986521618ccc4b&workflow=preview

I spent some time on this as well and the workaround is set Div Box 6 bottom margin to -6

1 Like

EDIT: The easies way is to add display="block" into SVG style.

This is because inline-block elements (like <svg> and <img> ) are recognised and treated as text. This mean they sit on the text baseline. The extra space you are seeing is the space left to accommodate character descenders (the tail on ‘y’, ‘g’ etc).

4 Likes

You superstar; it worked!

Thank you so much!

Chris

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.