: Why is this font damaged in SVG? 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

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?

10.03% popularity Vote Up Vote Down

: Making a curve for border I was wondering, if you could help me with something in Photoshop. I want to bend an image, as it will be used for a border on the site, however I cannot find

@Nimeshi706

Posted in: #AdobePhotoshop

3 Comments

: Editing photo background I have been given the photo below and I would like to know if there is a quick and dirty way to make the background more white. Because everything has a slightly

@Nimeshi706

Posted in: #AdobePhotoshop #PhotoshopEffects

1 Comments

: Illustrator: How to make 'lens elements', convex and concave, shapes? Just starting out in Illustrator and I want to make a shape such as this: The way I have done it is like this: Make

@Nimeshi706

Posted in: #AdobeIllustrator #Path #Shapes

2 Comments

: Preserving font type in illustrator SVG file Hi I am new to illustrator and created an image that uses "Skia-Regular" font. But when I save that image in .svg format, it changes the font type.

@Nimeshi706

Posted in: #AdobeIllustrator #Logo #Svg #Vector

4 Comments

Login to post a comment!

3 Comments

Sorted by latest first Latest Oldest Best

@Steve758

Try adding fontfamily inside SVG

10% popularity Vote Up Vote Down

@Jamie315

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.

10% popularity Vote Up Vote Down

@Mendez620

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.

10% popularity Vote Up Vote Down

Feed

: Why is this font damaged in SVG? 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

More posts by @Nimeshi706

: Making a curve for border I was wondering, if you could help me with something in Photoshop. I want to bend an image, as it will be used for a border on the site, however I cannot find

: Editing photo background I have been given the photo below and I would like to know if there is a quick and dirty way to make the background more white. Because everything has a slightly

: Illustrator: How to make 'lens elements', convex and concave, shapes? Just starting out in Illustrator and I want to make a shape such as this: The way I have done it is like this: Make

: Preserving font type in illustrator SVG file Hi I am new to illustrator and created an image that uses "Skia-Regular" font. But when I save that image in .svg format, it changes the font type.

Login to post a comment!

3 Comments

Back to top | Use Dark Theme