Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

2 Answers 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.

share|improve this answer
    
Thanks daugaard47. I am using inkscape. Sorry, I should have mentioned that. See my fix below. –  Kim Prince Feb 10 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

Your Answer

 
discard

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.