3

I would like to know if there is a way to get a better rendering of svg rotated text? 

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="900" height="400"  xmlns="http://www.w3.org/2000/svg">
     <text x="50" y="50" id="text_0" transform="rotate(17, 50, 50)">
         SVG text test 
    </text>
</svg>

You can test the render of this code here: http://jsfiddle.net/vbzTd/2/ It seems like characters are not following the baseline and I don't understand why.

Thanks a lot for your help.

romainbriand
  • 35
  • 3

1 Answers1

1

I had similar problem. When the text is rotated all the letters twitching. And it happens in all browsers. Fortunately, I had not so many text for rotating and I just converted text to path. After that it works perfectly. But if you have to rotate a lot of text - size of svg will increase dramatically.

XiM
  • 396
  • 3
  • 15
  • aww... do you know any tool that could do the job? I thought that to use a svg font could help (paths?) but it won't. My SVG graphic is generated with bits of javascript. I don't have a lot of rotated texts but as it is dynamic content I can't do manually. Thank you for your reply btw. – romainbriand Mar 13 '13 at 13:56
  • my content was static and it was easy to do with Inkscape... In your case I can suggest to define letters through `gliph` and try to use them. Some usefull links for you: http://stackoverflow.com/questions/2149707/get-font-glyphs-as-vectors-manipulate-and-product-svg-or-bitmap and maybe: http://stackoverflow.com/questions/7742148/how-to-convert-text-to-svg-paths – XiM Mar 13 '13 at 14:17
  • 1
    This is far better with SVG font, check http://jsfiddle.net/vbzTd/3/ Applied this on my project and this is perfect now! Thank you so much for your help! – romainbriand Mar 13 '13 at 14:28
  • yes, it's better way =) I'll use it next time. Happy to help. – XiM Mar 13 '13 at 14:30
  • The example looks just fine to me in Opera. In any case `text-rendering: geometricPrecision` is usually good for forcing the browsers to render with a bit more precision (good for rotated text). Not sure if it will fix the problem here though, if the other browsers ignore that hint. – Erik Dahlström Mar 13 '13 at 14:51