SVG doesn't fill full space

[Macker (Chris MacDonald)]

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

[iDATUS]

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

[Stan (justAnotherDeveloper)]

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).

[Macker (Chris MacDonald)]

You superstar; it worked!

Thank you so much!

Chris