SVG Essentials/Creating Fonts

From WikiContent

Jump to: navigation, search
SVG Essentials

The fonts built into the system that renders your SVG documents will take care of the vast majority of your needs. Sometimes, though, you will want to use a custom font. It is possible to create a font for use with SVG from scratch. In brief, you use a <font> element tag to describe the origin and default width of the font's glyphs. Inside the <font> is the <font-face> element, which has an immense number of attributes that describe the font's dimensions in excessive detail. These attributes are summarized in the SVG specification at Following the <font-face> are <glyph> elements, which contain path descriptions for each of the glyphs you wish to have in your font.

While it is possible to create fonts from scratch, it's a lot of work, and often a duplication of effort, since the glyphs you need may be in an already-existing font. If you already have a True Type font with the desired glyphs, you are in luck.

The ttf2svg Utility

The Apache Batik project has created a utility that will convert your True Type fonts to SVG. The following summary is adapted from the Batik project's documentation and is Copyright (C) 2000 The Apache Software Foundation. All rights reserved.

If you are using the Batik binary distribution, type the following at the command line:

java -jar batik-ttf2svg.jar [options]

If you are using the Batik developer distribution, type the following at the command line:

build ttf2svg [options]

In both cases, the options are the same:

[-l range-begin]
[-h range-end]
[-ascii] [id id]
[-o output-path]

The options have the following meaning:

Specifies the True Type font file that contains the characters to be converted.
-l range-begin, -h range-end
The low and high value of the range of characters to be converted to SVG. (ASCII or Unicode values.)
Forces usage of the ASCII character map.
-id id
Specifies the value for the id attribute of the generated <font> element.
-o output-path
Specifies the path for the generated SVG Font file. If not specified, output goes to the Java console.
Specifies that a set of SVG <text> elements should be appended to the SVG Font file to visualize and test the characters in the SVG Font. This provides an easy way to validate the generated SVG Font file visually.

For example, to convert characters 48 to 57, that is, '0' to '9', in the myFont.ttf into their SVG equivalent in the mySVGFont.svg file, appending a test card so that the font can be visualized easily, you would use this command:

java -jar batik-ttf2svg.jar /usr/home/myFont.ttf -l 48 -h 57
   -id MySVGFont -o mySVGFont.svg -testcard


Make sure you have the right to embed a font before you embed it in an SVG file. True Type Font files contain a flag that defines the "embeddability" of a font, and there are tools for checking that flag.

Personal tools