I have a web font which I would like to display using SVG instead of in HTML. The reason for this is that I want to display large typographically beautiful text, and I don't see any way of getting the control of Kerning that I need with HTML/CSS rendered text.

I own the font (or it's free, rather) and it would be easy to display it as a bitmap and be done with it - but it is very large, and I'm trying to get the whole page to load in under half a second, so I believe SVG is my answer.

I own Photoshop, but do not have any budget for Illustrator. Though, I guess I could use the trial short term - it would be nice to be able to edit and and make changes a month out from now. Are there any vector tools which would meet my need, simply to create SVG from text so I could manually adjust the kerning to display on the web?

6 Answers 6


Inkscape certainly converts fonts to paths (Select, then Shift-Ctrl-C).

The standard save format is SVG - either 'Inkscape' (extended) SVG or 'plain' SVG.

It also has an SVG Font Editor.

BTW - I'm assuming this CSS was no good to you:

<span style="letter-spacing: 5px">Kerning</span>

Try Kern.js. which is based on Lettering.js (both jQuery plugins):



That would hopefully give you kerning control without sacrificing SEO and accessibility.


I just found out about kerning.js, which may offer even more control than Kern.js:


Also based on Lettering.js.


Try Inkscape - it's an open source alternative to Illustrator. I haven't used it much myself, but it began as an SVG editor, so converting text to paths and saving as SVG should be easy.


  • 1
    Inkscape is an impressive piece of software. It's UI isn't as polished as AI, but it's feature set is quite robust and I find many of its drawing tools much more akin to FreeHand, which I had always preferred over AI anyways.
    – DA01
    Aug 18, 2011 at 15:11

Inkscape is actually better at SVG than Illy. Illy does funny things when saving as SVG, basically does not respect SVG specifications. Use Illy for AI, but Inkscape is a better choice if you have SVG compliance in mind.


As stated, Inkscape is the tool to go with. But note that an SVG image isn't text anymore. While that's fine for an illustrative type display, you're likely going to want actual text on your site for SEO and accessibility reasons.

Have you looked into using CSS webfonts? That might be an acceptable compromise.


Here's another program that works great with SVGs: iDraw on the Apple Mac/App Store.

  • Hi Dude (:P)! Welcome to GD. Thanks for adding an answer. It would be great if you could explain why you think this program is good for what's being asked (why do you prefer over others?). That way users don't have to go to the page to understand what the program does, and the answer is more complete.
    – Yisela
    Feb 27, 2013 at 21:25

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.