[Resolved] Add SVG Logo like this site

[24xstudio]

Hey,

I am already using the SVG logo on my site but it’s damn slow and that’s the reason my FCP is high I guess.

I want to give it a try.

Thanks

[Leo]

Hi there,

You would basically need to rebuild the logo structure using the inside_navigation hook:
https://docs.generatepress.com/article/generate_inside_navigation/

https://docs.generatepress.com/article/hooks-element-overview/

[24xstudio]

Hey,

I am not good at this, kindly guide me 🙂

[Leo]

Try something like this as your hook content:

<div class="navigation-branding"><div class="site-logo">
    <a href="https://cliffyb.com/" title="cliffyB" rel="home">
	SVG CODE HERE
    </a>
</div></div>

[24xstudio]

Thanks.

But how can I generate the SVG code? I have an SVG image.

Also, doing this will also improve my pagespeed, and after doing this I have to remove the current logo from the customizer?

Lastly, what about the height and width of the SVG logo?

Thanks

[Leo]

But how can I generate the SVG code? I have an SVG image.

This isn’t a theme-specific question so I’d recommend Googling for some instructions.

Also, doing this will also improve my pagespeed

I don’t think you will see a difference there but not sure either.

and after doing this I have to remove the current logo from the customizer?

Yes

Lastly, what about the height and width of the SVG logo?

Might need some CSS tweak but can you add the logo in first?

[24xstudio]

Kindly check the logo I adjusted the height but its too small

[24xstudio]

Resolved

[Leo]

Glad to hear 🙂

[Author]

Posts