How to create SVG for good typography on the web without buying Illustrator?

Question

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?

Answer 1

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>

Answer 2

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

http://www.kernjs.com/

http://letteringjs.com/

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

Update:

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

http://endtwist.github.com/kerning.js/

Also based on Lettering.js.

Answer 3

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.

http://inkscape.org/

Answer 4

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.

Answer 5

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.

Answer 6

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