SVG Logo not showing in Chrome

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.

yes here: https://moove-artists.com but this is happening with all the sites I build!

Hi @Stewie_Griffin

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!!! :smiley:

Hi @Stewie_Griffin

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

1 Like

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 :slight_smile:

1 Like

Ohhhh! thank you so much! you saved my life :smiley:

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 :slight_smile:

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 :confused:

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!