Archived topic
How to include html svg as a logo?
5 replies · Started by Carlotta Gergely on July 14, 2021
Hi there, I have to rebuild a website for a customer who has currently a html page. The current logo should be included in the new one but it is html svg code. Now I am getting stucked because I don't know how to include this in my generate press theme. I tried to set up a wp-head hook but it seems that something is missing. Here is the code:
<svg height="120" id="logo" viewbox="0 0 110 120" width="110" xmlns="http://www.w3.org/2000/svg">
<title></title>
<g fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="5"> <path d="M2.5,64.5c0,28.995,23.505,53,52.5,53s52.5-24.005,52.5-53" id="smile"></path> <g id="eyes"> <line x1="107.5" x2="107.5" y1="2.5" y2="40.5"></line> <line x1="80.5" x2="80.5" y1="2.5" y2="40.5"></line> <polyline points="2.5,40.5 2.5,2.5 29.5,40.5 29.5,2.5"></polyline> <line stroke-linecap="butt" x1="80.5" x2="107.5" y1="21.5" y2="21.5"></line> </g> </g> </svg>
Thank you for your feedback and ideas.
Carlotta
Hi Carlotta,
You can try to paste the SVG code to a tool like this, then you'll be able to optimize and download the SVG.
https://jakearchibald.github.io/svgomg/
Install SVG support or safe SVG plugin, then you can upload the SVG like a normal image, and set it as the logo at customizer > site identity.
Let me know if you need further assistance :)
Hi Ying,
finally I have my logo as svg and animated but there is another problem. I copied the svg to the media library and added to the logo field in customizer. But when I look on the site it comes without the animation. So is it not possible to use animated svg logos with GeneratePress?
Carlotta
Hi there,
GP doesn't know that you have an Animated SVG.
This will be related to the SVG file and the method you're using for the animation.
How is the animation created ? And is there a link to the site where i can see it ?
Hi there,
Thanks for your reply, I found a solution, the link is https://dev.nathalie-huber.ch if you would like to see it. I created the SVG with SVGator but the export was in JS which doesn't work. They told me to use the CSS Format for the export and it works now fine on Firefox, Chrome, MS Edge but not on Safari so I need to check with them how to solve this issue.
Oh thats rather fun :)
Works for me and on Safari (MacOS) too.
Glad to see you got it resolved.
