Advice on SVG to TTF conversions (already googled)

Fonts and More General Font Discussions
1

Hello. In trying to convert the SVG files an artist friend of mine has drawn up for a font into TTF format, I did my homework, googled for SVG2TTF and have found http://tinkerhouse.net/log/python-fontforge-is-definitely-a-godsend/ and http://www.orakeldel.net/downloads/svg2ttf.py. The former actually worked with some tweaking, but I have one problem:

Circles in the SVG are being converted into contours that are defined by four off-curve points sitting at the four corners of the bounding box of the circle. This doesn’t look like a real circle though! I have noted that circles in TTF fonts (which has only quadratic splines to my little knowledge) are defined by a number of on-curve and off-curve points. I do not know however how to get the script to convert the SVG circle to a proper TTF circle. Can anyone help?

If there are any other ways of better converting a set of SVG files to a single TTF could anyone please advise? Thanks.

2

Using the quadratic Bézier curves of a TrueType font, I think that a true, precise circle is impossible. However, a good approximation can be produced.

Whenever I want a circle, I tend to copy the glyph from the digit 0 position of my Stardisc font.

http://forum.high-logic.com:9080/t/stardisc/1610/1

I produced the Stardisc font some years ago for a special purpose. However, as the font is installed pn the PC that I am using I find that whenever I want a circle I can open the font in FontCreator and copy the glyph.

You are welcome to use the glyph as a source for producing a circle if that is of help to you.

Also you are welcome to use the glyph design as a source for a set of points for a circle if that helps.

Is that the information that you need?

William Overington

26 January 2012

3

Do send me a sample that includes the problematic circle, and I’ll see if we can make it work.

4

I usually just draw an octagon with all the points set to X or Y = 0 or 1000, then rotate about the middle 45 degrees, and repeat until the points all lie on the 0/1000 lines, no matter how I rotate them. Then you just change all the points to off-curve, and you have a very good circle in not much time. You can then scale the circle however you want.

5

Hi thanks to the others who provided various ways of creating a circular contour. But my question was specifically about the Python Fontforge module (which I am calling from a script to mass-import SVGs into a TTF font) producing imperfect TTF circles from SVG circles. I realize this is the HL FontCreator forum and not the Fontforge forum but I posted this under “General Font Discussions” as I thought the experts here would already have tackled the problem of compiling SVGs into a TTF.

Hi Erwin! Glad to see this response from you! Are you working on SVG import for FontCreator (or is it already there and I have missed it)?
i.svg.txt

6

Thank you for posting the source file of the font in SVG format.

I am not familiar with SVG format in any detail, yet I did notice that the file, which I opened using WordPad, had a number of statements with the word circle in them, of which the following is the first in the file.

I found the following.

http://www.w3.org/TR/SVG/shapes.html#CircleElement

http://www.w3.org/TR/SVG/eltindex.html

I had heard of Python but knew nothing about it and I had not heard of Fontforge.

It seems to me that it is possible that what is needed is to find the source code of the function that Fontforge uses to convert circle to a sequence of function calls for starting a contour, adding on-curve and off-curve points and ending a contour.

Then, using that source code as a guide as to what names are used for the various functions, such as, for example, whether it is on_curve_point(x,y) or on_curve(x,y) or whatever, try to write a new piece of code for the function that Fontforge uses to convert circle to a sequence of function calls for producing a contour.

I have no idea as to how to use that piece of code in Fontforge, but here is a guide to what I think might be the way to write the new function, using function names that I have made up for this explanation. The names will need changing around, yet hopefully what I have written below will help in producing the final code. The syntax is just a general sort of pseudo-code, sort of Pascal and Java mixed together. I prepared the code using WordPad using Arial at 24 point. Copying the following and pasting it into WordPad and formatting using Arial at 24 point may make it easier to analyse.

circle(xc, yc, r)
{
start_contour();
on_curve_point(xc+r, yc);
off_curve(xc+r, yc-0.4142r);
on_curve_point(xc+0.7071r, yc-0.7071r);
off_curve(xc+0.4142r, yc-r);
on_curve_point(xc, yc-r);
off_curve(xc-0.4142r, yc-r);
on_curve_point(xc-0.7071r, yc-0.7071r);
off_curve(xc-r, yc-0.4142r);
on_curve_point(xc-r, yc);
off_curve(xc-r, yc+0.4142r);
on_curve_point(xc-0.7071r, yc+0.7071r);
off_curve(xc-0.4142r, yc+r);
on_curve_point(xc, yc+r);
off_curve(xc+0.4142r, yc+r);
on_curve_point(xc+0.7071r, yc+0.7071r);
off_curve(xc+r, yc+0.4142r);
end_contour();
}

I found the following links.

http://www.w3.org/Graphics/SVG/

http://www.w3.org/TR/SVG/fonts.html

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

http://fontforge.sourceforge.net/

http://en.wikipedia.org/wiki/FontForge

http://python.org/

http://en.wikipedia.org/wiki/Python_(programming_language)

I hope that this helps. As this thread already has several participants and others may well be reading the thread with interest, I am hoping that although what I have written does not solve the problem entirely that it may be useful information in a group solving of the problem.

William Overington

30 January 2012

7

I’ve quickly looked into the issue, but from what I can see the conversion taken place in fontforge. Nothing we can do about that.

We have looked into SVG, but there is not much demand for importing SVG files at the moment.

If you want to use FontCreator, then all you have to do is convert your SVG files into postscript based image files (.eps .ps .ai or .pdf). You could use an online service like: http://image.online-convert.com/convert-to-eps

8

The circle tool in Font Creator does an excellent job!
You might find http://forum.high-logic.com:9080/t/circle-secrets-warning-points/572/1 interesting.

9

Thanks, I’ve since been using a custom script based on Inkscape. fWIW I attach it if it would be helpful to others.
svg2eps-shriramana.txt (432 Bytes)