SVG renders differently in Windows Chrome


I exported the logo type of my new website with Sketch 3 into a SVG file and it worked as expected in all browsers I installed on my Mac. My dad checked the website and suddenly the SVG loaded differently. Even the IE on his Windows 7 machine displays the SVG correctly. Chrome runs the newest version and I have no clue on what to do about it. The Mac version of chrome displays the sag correctly as well.

Sorry for a telescreen instead of a screenshot.

This is the website:

I’ve never had a problem with icons (svgs) in Chrome. I did read up on sketch 3, and it’s only platform is for Mac. I’m not sure if that has something to do with it, but I don’t think so.

Have you tried taking your icons and turning them in fonts using a font generator such as font squirrel?

It’s to do with the header resizing at different viewport sizes, although I can’t work out exactly what’s happening.

If I open your site in Chromium on Linux, I see:

However, when I try to inspect the element, opening the developer tools causes the site - and the header - to resize:

I can produce exactly the same effect using Firefox (on Linux) by simply opening and closing my bookmark toolbar. It’s enough to cause the resizing.

I don’t know which of your rules is causing this, as I can’t produce the problem with developer tools open.

Its not about icons but about the logo which is exported as an SVG.

But for some reasons this works totally fine on Macs with any browser, and an SVG should not transform itself, even when resized.

That was a design choice that the OP wanted in another thread and when the viewport height is reduced a media query kicks in and shortens the height of the header. This is so that the header doesn’t take up to much screen space an small height devices or desktops.

Thanks, Paul.

Well what seems to be happening is that at the larger header size, the logo is being cut off, as there appears to be insufficient space for it. (My guess.)

[quote=“LamboLight, post:5, topic:106661, full:true”]
But for some reasons this works totally fine on Macs with any browser, and an SVG should not transform itself, even when resized.
[/quote]I can reproduce it on five different browsers, using a monitor with screen resolution 1280 x 1024. At the larger header size, the SVG is curtailed.

That may be because the svg is missing the viewbox attribute and the width and height attributes in the svg code should also be set to 100% or omitted.

There seems to be many instances of this mentioned around the web.

Thanks for the replies. But, correct me if I am wrong, SVGs should be static as they are in the link Paul posted. They should not change their character kerning or any other measurements of the elements contained in the SVG.

The SVG even changes its font throughout the different browsers.
What it should look like:

What it looks like instead on your devices:

What use do SVGs have if they act like a frame with some HTML elements in it anyway? Am I supposed to deploy the typeface to the CSS?

If you don’t want the text in your svg to be text then you need to convert it to shapes (convert to outline).

More info here.

Thanks again.

I replaced the original SVG with the one made out of outlines instead of actual font. I would like you to check whether its performing as planned or not.


Seems to be fine now.

1 Like

Looks good to me!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.