Archived topic
SVG code for logo
15 replies · Started by sg on January 29, 2019
Hi. i have svg code that need to used. its somthing like this.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 407"><defs><style>.cls-3{fill:#ef4b89}.cls-3,.cls-4,.cls-5,.cls-7{stroke:#4a4a4a}.cls-11,.cls-3,.cls-4,.cls-5,.cls-7,.cls-9{stroke-miterlimit:10;stroke-width:.25px}.cls-4{fill:#8c181b}.cls-5{fill:#0776bd}.cls-11,.cls-7,.cls-9{fill:#fff}.cls-9{stroke:#3a75bb}.cls-11{stroke:#fff}</style></defs><title>my svg logo</title><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><image width="612" height="407" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmQAAAGXCAYAAAAd/0yWAAAACXBIWXMAAAsSAAALEgHS3X78AAAgAElEQVR4XuydeZwcVbn+x+k6S/VsSQiEkJCETRbZN1EgeJVNEEFQFFCviAhXZRHl4np/RAkiBlEUFFG4IAqogChc4KogXCMggoKAsgZZBUVIAAUR+T3POae6eyYTarL2TPXzx/dT1T0nk56ut87z1Dn.........2.77-39.58-.07-11.75-.46-25.62-2.77-39.47l-.68-4.08-.68 4.08c-2.31 13.85-2.7 27.73-2.77 39.58.08 11.77.48 25.66 2.77 39.47z" transform="translate(-14 -37)"/></g><path id="STAR" class="cls-11" d="M319.95 139.46h-9.9l-3.06-9.41-3.06 9.41h-9.9l8.01 5.82-3.06 9.42 8.01-5.82 8.01 5.82-3.06-9.42 8.01-5.82z"/></g></g></svg>
i tested inserting into direct console it does work but how do i implement it permantly ?
point to take note the logo will differ by menu, will create svg sprite for that purpose.
Thank You
I've changed my idea about this.
instead, I will still use the SVG code to replace the SVG image [no idea why I would want to do do that, perhaps reading too much on the pro of svg ].
The logo will be just plain logo with no text, dynamic text to be inserted base on the page.
this thread interest me .,
https://generatepress.com/forums/topic/replace-logo-with-animated-logo-though-shortcode/
i could easily hardcode the css with content: attr into my custom post type template.
any guide will be appreciated, thank you.
Hi there,
whats stopping you from using the method provided in that topic?
Hi David,
using 2 hooks i have done something,
it does look good to me ,
i have one issue though, i could not figure out how to make the logo lead to home, the just doesnt seems to be working at the whole logo.
could you give me your feedback too if any ? thank you .
pls refer to mysite/home for the updated work.
Your site seems to be behind a coming soon page.
Any chance you can open it up so we can see?
Hi tom,
pls enter ?bypass=gp at the end of the url to bypass the cs page. thanks.
Ah, so you're altering the navigation logo. Does your filter still have the <a> element around the <svg> element?
Hi tom, yes i did , could you test and let me know if its working too.
another thing is, you can see the svg code, its substancial for the logo. performance wise which is better ? svg logo img, or the code ?
Thanks.
i found my answer here:https://www.w3.org/wiki/SVG_Links
Awesome. All working now? :)
Hi, yes, but i still deciding which is better for my case, given the lines of codes that svg produce.
" another thing is, you can see the svg code, its substancial for the logo. performance wise which is better ? svg logo img, or the code ? "
I don't think there's a difference when it comes to performance. An SVG image just has the code for the svg inside the file.
svg code is inline codes no files to fetch, whereas svg image has filed to fetch, am i right ?
i guess svg code then.:)
I suppose so, although the difference should be very minimal. Definitely nothing wrong with using the SVG code :)
ok, thanks.
