Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

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.

share|improve this answer
Thanks daugaard47. I am using inkscape. Sorry, I should have mentioned that. See my fix below. – Kim Prince Feb 10 '14 at 21:35

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.

share|improve this answer

Try adding fontfamily inside SVG

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

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 '15 at 11:37

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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