Outlined font much thinner when saved as SVG

Question

I have a logo which is using the font Lato Light. Before saving out, all fonts have been outlined.

When I output the vector as an SVG (using Export in Adobe Illustrator), the font is coming out much thinner.

Here's a screen grab of the logo within Illustrator before saving as an SVG:

Here's a screen grab of the logo once it's been saved as an SVG:

The SVG displays like this within the browser. When I take the SVG back into Illustrator it looks thicker again.

I want the results to be exactly as they are in Illustrator. I've tried increasing the thickness to Lato Regular and then exporting, but it's not right.

Any ideas on how I can fix this?

Answer 1

You can not. Each engine implements its own rendering. Thus each browser looks different. There is no way around this fact other than using a bitmap image.

Though in this case it seems that the svg may have transparency applied to it.

Note that purely technically the antialiasing Illustrator does is wrong. As it does not take the nonlinearity of he color space into account.

Answer 2

These inconsistencies are common hence what I always do 2 things with the fonts that will become the part of my SVG.

1. Convert all the fonts to Outlines.
2. Expand all the Outlines for consistency.

Hope this helps. :)

Answer 3

I'll keep the answer I've accepted, but wanted to add a really good work around that's worked for me.

I applied a 0.3 stroke to the font. From there I created outlines (Type > Create Outlines). Before saving to SVG, I also outlined the stroke (Object > Path > Outline Stroke).

This little hack adds an extra weight to achieve the results I was looking for.

Hope this helps!