: Help/docs for using Inkscape for SVG icon font creation I was deliriously happy to find this blog post about using Inkscape and one or another online converter to create web font kits. My interest

@Gail6891361

Posted in: #Fonts #Inkscape #WebsiteDesign

I was deliriously happy to find this blog post about using Inkscape and one or another online converter to create web font kits. My interest is specifically in icon fonts.

While that article was helpful (and extremely so), I still have a lot of questions about the SVG font editor in Inkscape 0.48.2 (I think it was added in 0.47). For example, it's not at all clear how to orient characters with a baseline (if that's even possible).

The InkScape docs suggest editing the font with FontForge, but I have no FontForge experience and attempts at getting some have consistently ended in a Segmentation Fault within a few mouse clicks :-) If there are ways of doing this in Inkscape, that'd be ideal.

So are there any useful guides for this process available? (Or other, better tools?)

Note — I am not a trained graphics designer by any means, but I'm OK with Inkscape in general.



Edit

So I've been fooling with this for a while and it's just really mystifying. Because what I'm making is an icon font, what I really want, in the end, is for a display: inline box with 1em height and width and line-height to exactly contain a glyph that fills the nominal font horizontal square size (the "horiz-adv-x" attribute on the SVG <font> tag). If I make a test glyph that's got four boxes pushed to the corners of the nominal 1024x1024 font square (the size of the Inkspace artboard that I've got set up), then the resulting TTF font, when I style it like that, extends up out of the box. (edit — that's not actually true; I was using a "line-height" greater than 1em and that threw me off; see below)

I realize that there has to be some allowance made for descenders, but I have not been able to figure out how to account for that when creating a set of glyphs in Inkscape. That is, I can by experimentation try to determine exactly how much to shift my glyph out of the artboard downwards, but it's frustrating and it seems unpredictable. In fact it's not clear at all how the font conversion code even finds out from the SVG font definition what the baseline should be.



Edit again

OK so what I've been able to determine clearly is that a 1em by 1em glyph (where the em size is derived from the SVG <font-face> tag and its "units-per-em" attribute), after conversion to a .ttf font file, is drawn a little bit above the baseline as was determined by the author of the blog post I linked above. How far above, and why? I don't know. Adjusting the "horiz-origin-y" attribute in the SVG code has no apparent effect (and I don't have any reason to think it should; I was just fooling with it). Shifting the SVG path down out of the canvas (having the effect of changing the drawing commands such that the coordinates are negative for portions below the canvas) will definitely adjust the glyph; it's the particulars of how exactly that's all measured that I'm trying to determine, I guess. If I knew, then it'd be pretty easy to set up an Inkscape template with guides for the limits of glyphs and where the baseline is (again, like in the blog post, but more than just the baseline).

One cool thing I did learn is that the "horiz-adv-x" attribute on <glyph> tags does have an effect, and specifically that using a value of zero allows a glyph to be placed in a line of text such that the next glyph will exactly overlay. That's neat, because it means it's possible to use separate icon "parts" to construct multi-colored icons from an icon font! With the assistance of something like Lettering.js that could be very powerful and flexible. (Somebody else blogged about a similar approach using positioning, which would also work fine.)

Vote Up Vote Down

Login to post a comment!