[BUG] Header logo is cut on the sides

Describe the bug 描述你遇到的错误

When using a svg logo in the header, it gets cut on the sides.

DoIt:

Expected behavior 期待的行为

The logo is displayed correctly.

LoveIt:

Bonus:
It would probably look nicer, if the logo is vertically aligned to the middle of the header text. Currently it's aligned on the bottom boundary it seems:

Comparing with the alignment of the menu items, it seems like the header text is positioned correctly, but the logo size is simply too large (36px).

Screenshots 屏幕截图

DoIt:

LoveIt:

Build Environment 构建环境

hugo v0.125.1-68c5ad638c2072969e47262926b912e80fd71a77+extended linux/amd64 on Docker
latest DoIt commit

Preview Environment 预览环境

Firefox on Windows 11

Additional Information 补充信息

No response

The logo image is restricted to be a square to avoid layout shift

DoIt/layouts/partials/header.html

Line 8 in 0a0b127

    
           {{- dict "Src" . "Class" "logo" "Height" "36" "Width" "36" | partial "plugin/image.html" -}} {{- end -}}

Do you think it's better remove this restriction or use the capability to insert the image as raw HTML in this case?

DoIt/exampleSite/config/_default/params.toml

Line 56 in 0a0b127

    
           pre = '<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>'

The logo actually is quadratic and defines width="64" height="64" in the source:

If I remove the size hint, the logo is no longer truncated at the left side, but still on the right:

For me it looks like the header text positioning is the actual problem and not the logo. In this screenshot you can see how the header text overlaps the logo:

You can as well see, that the header text (and the menu) is not fully centered on the vertical axis.

Hi @HEIGE-PCloud, thanks for trying to fix this 🙂

Sadly, it looks like this now (64x64px in the svg code):

Without width and height specified in the svg:

Try 36x36 or inlining the svg directly.

DoIt/exampleSite/config/_default/params.toml

Line 56 in cfdf56e

    
           pre = '<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>'

Ok it should now definitely be fixed. Sorry I missed your logo's svg file previously.

Thanks a lot! I can confirm that the latest fix solves the issue 🙂 I left a minor comment on the commit: de76eff#r142794099

Not sure if this would have unwanted side-effects, but in my particular case it seems to further improve the result.