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:

enter image description here

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

3 Answers 3


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.

  • if your problem was fixed, please mark this (even being yours) answer as the answer of your choice. Dec 8, 2017 at 10:44

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.

  • Thanks daugaard47. I am using inkscape. Sorry, I should have mentioned that. See my fix below.
    – DatsunBing
    Feb 10, 2014 at 21:35

Try adding fontfamily inside SVG

  • 2
    Hi Base M Pandian, welcome to GDSE and thanks for your answer. Could you please be a bit more complete? We're looking for accessible and motivated answers. If you have any questions, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site!
    – Vincent
    Jan 9, 2015 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.