Why is this font damaged in SVG?

Question

I have a logo which has a symbol and some text. The stroke on the text is about 15px, so nice and fat.

When I use it as an SVG image in a page, it works fine, except that when I increase the size, the letters in the text start to bleed in to each other.

I changed the text objects to paths, and grouped the whole thing, and now it works fine at all sizes in the web page, except that the font seems to be damaged. Here's an example:

The font is Ubuntu. Notice that the letters T, A and E have corners cut out. What am I doing wrong?

Answer 1

I am using inkscape. The problem was fixed by selecting the text, then in the Stroke Style, changing both the Join and the Cap to be rounded.

Answer 2

When saving text to an svg for web I treat it as an image. Assuming you're using Illustrator...

I would do the following:

• Outline the text by selecting the text and pressing Shift > Ctrl > O (thats and o not a zero)
• Then Outline the stroke: Object > Path > Outline Stroke
• Then use pathfinder under the windows tab and choose the merge button under pathfinder.
• Then go to the layers tab and delete any outline path junk leftover by the merge.
• After that save it as an svg

I do a lot of responsive webdesign and save my svg's at 16px wide. Then make a class in the css called .img-max { width:100%; height:auto; } set the min-width and max width to your specifications.

Hope that helps. Let me know if you have any questions.

Answer 3

Try adding fontfamily inside SVG