Hello! Any ideas why my svg logo is not showing in chrome?
Safari
Chrome
Maybe a z-index issue in chrome? Might want to inspect the elements in Chrome. Do you have a live link?
It’s hard to tell with just two screenshots.
Can you try replacing your logo with this one and see if it works ? I had to zip it since the forum does not allow upload of the svg extension.
logo.svg.zip (13.5 KB)
MDS
It works!! What did you do? Merci Beaucoup!!! 
You simply need to change the svg piece of code xlink:href="data:img/png;base64 to xlink:href="data:image/png;base64. That is changing img to image.
MDS
2 Likes
Hi @Stewie_Griffin,
Just had a quick look at the link you posted and on mine its showing the logo behind the image.
nice site by the way.
Thank you! Thats fix I was adding the code into the stylesheets 
1 Like
Ohhhh! thank you so much! you saved my life
You are very welcome.
I used to love helping out others on the forum but have been quite busy these last months. Will try to assist more as I used to.
MDS
2 Likes
I know you have helped me a lot during this years
1 Like
@Stewie_Griffin, out of curiosity why are you choosing to route your image through SVG verse just using an image directly?
The quality is way better than png. If I convert it to svg it will keep the shape. My logos always get blurry on png 
1 Like
Even if you choose like 600x400px size, which I find huge for a logo in the navigation header? I never had issues with png files.
Yeah but when Is 150px its very blurry on png
If you’re after responsive clarity, then you would gain more benefits from optimizing your image across breakpoints verse the current method of using a base64 image inside an SVG.
Optimally you would benefit the most by actually recreating the logo completely as vector objects and truly taking advantage of the resolution independence that SVG offers. This logos simple design and content are perfect for pure SVG (vectors). You are not really gaining any benefit from SVG with the current approach.
Many times brands will have various ways in which a logotype can be displayed and used. Such as variations with or without background color along with text color inversions and variations. If that is the case then displaying a different version on the mobile breakpoint would allow for even further clarity regardless of using SVG or PNG.
1 Like
I agree. The whole point of an SVG graphic is that it retains its sharpness at any size. I made a quick comparison of the original logo by displaying the SVG with the embedded PNG with a version I created as a pure vector image (Maybe I didn’t get the correct font, but it illustrates the point)
This is the SVG with PNG embedded
As can be seen, it’s blurry.
This is the result from a pure vector SVG
Much sharper. Furthermore, that sharpness is retained regardless of display size. As for the file size, the SVG in this example is marginally heavier at 24 kb as opposed to 19 kb for the PNG version. However, this pure SVG image stays the same kb size no matter how large you make it. Whereas an optimised larger version of the PNG version will grow in kb size. Of course, you could just stretch the PNG version on page, so whilst it will remain the same kb size, that’s when the fuzzies will appear .
2 Likes
Indeed. Furthermore just ask your client they should have the logo or can ask the designer for it in vector format. I can’t imagine such a logo was created in pixels originally. Worse case figure out the fonts and recreate it yourself so you can properly utilize the benefits of SVG.
2 Likes
How did you created the vector logo? Its so much sharper!