SVG and Typography: Characters
by Fabio Arciniegas A. | Pages: 1, 2, 3

Fonts

So far, we have avoided the problem of character availability in specific typefaces by using typefaces such as Arial which are available in most computers; now we need to see how to embed fonts if we are to create specific work that can be reliably displayed in all SVG-compliant viewers. For this purpose, SVG provides a font tag that describes “SVG fonts”, which are collections of font outlines described in SVG paths.

Our three goals regarding fonts are to see how an SVG font can be embedded, to note a couple of important extra sub-elements such as missing-glyph, and finally to see how to convert True Type Fonts into SVG fonts.

Embedding an SVG font

An SVG font is embedded in a document via the font tag. Inside the font tag, there is information about the name of the font, an ID we can use to reference it, and the definition of each glyph.

The following Listing shows how to embed the font “Space Toaster” by Chank Diesel (originally designed for the Cartoon Network's “Space Ghost Coast to Coast”). Note how we only need to embed the glyphs for the characters we are going to use.

<?xml version="1.0"?> 
<svg width="100" height="100">
<defs>
<font id="SpaceToaster" horiz-adv-x="730">
  <font-face
    font-family="Space Toaster"
    units-per-em="2048"
    panose-1="2 0 5 9 0 0 0 0 0 5"
    ascent="1835"
    descent="-547"
    alphabetic="0"/>

<glyph unicode="!" glyph-name="exclam" horiz-adv-x="420" d="M408 1532Q367 
1170 203 520L147 512Q174 860 174 1251Q174 1398 168 1497L408 1532ZM184
434Q217 434 234 408T252 340Q252 266 203 196T104 125Q70 125 50 160T29 
238Q29 309 80 371T184 434Z"/>

<glyph unicode="W" glyph-name="W" horiz-adv-x="1069" d="M1040 1446L870
-152L487 604L279 -111L-4 852L147 1020L328 252L487 786L850 285L954
1409L1040 1446Z"/>

<glyph unicode="o" glyph-name="o" horiz-adv-x="715" d="M344 555Q344 583
392 645T459 720T504 738T555 745Q626 745 655 682T684 526Q684 380 631 254T445
40T221 -47Q166 -47 101 32T35 252Q35 345 71 479T199 706T442 831L389 764Q259
709 181 593T102 287Q102 103 199 92L223 90Q353 90 448 221T543 483Q543 533
529 571T499 629T467 649Q442 649 382 590Q355 563 344 555Z"/>

<missing-glyph horiz-adv-x="2048" d="M256 0V1536H1792V0H256ZM384 
128H1664V1408H384V128Z"/>

</font>

</svg>

Missing Glyphs

As you can see in the code above, each glyph is defined separately, using the glyph element. Now when we use the font in any text element, the correct glyphs will be shown as demonstrated in the graphic below (the glyph definitions have been omitted from the listing to avoid repetition). This selective inclusion of characters allow us to keep the file as small as possible. On the other hand, if we use a character that is not defined in the SVG font, the figure defined by the missing-glyph element will appear:

<?xml version="1.0"?> 
<svg width="100" height="100">
<!-- font definition omitted -->

<g style="font-family: Space Toaster; 
             font-size:30pt; fill:black; 
             filter:url(#shadow)"> 
        <text x="10" y="40">  WoW!  </text> 
</g>

<g style="font-family: Space Toaster; 
             font-size:20pt; fill:black;"> 
        <text x="10" y="90">  Whoa!  </text> 
</g>

</svg>

Fig 4. wow.svg

Note that there is more metadata about the font encoded as attributes in the font element. For details about these attributes you can refer to the SVG specification, in particular section 20 (Fonts); however, normally these are values you don't concern yourself with, they are generated by the tools we use to create the SVG font from True Type.

Generating SVG fonts from True Type

Currently the best known tool for the generation of SVG fonts is Apache Project's Batik. Batik has a very simple command-line utility that allows you to create SVG Fonts from a True Type font.

Batik can bedownloaded at no cost. Using Batik's ttf2svg utility is a very simple process that can be summarized by the following invocation which creates an SVG document with the SVG version of a font called “Hollywood Hills”, giving it the id HollywoodHills, saving it to the specified file, including a testcard, that is text elements with each converted glyph:

 java -jar "c:\lib\batik-1.5.1\batik-ttf2svg.jar" 
"c:\windows\fonts\HOLLH__.ttf"-id HollywoodHills
-o HollywoodHills.svg -testcard

A final word of advice: although it's very easy to create SVG fonts from True Type you must be careful to check you have permission to do so. Most great fonts are not free.

Non-Latin Scripts

So far we've talked about characters outside the Latin alphabet as an exception, in which case we have recommended hexadecimal numeric references. But what if your SVG document is contains a large portion of text in some other script, like Cyrillic or Hebrew?

There are three main technical issues associated with type in the non-latin SVG content scenario: appropriate fonts, encodings, and bidirectionality.

Appropriate Fonts

To include large portions of non-Latin text in SVG documents, we have two options: the first one, the legitimate one, is to use the correct characters and specify a font that has glyphs for them. The second option is to use Latin characters with a font that matches Latin characters to non-Latin glyphs (e.g. you write in your XML document an “X” and it shows the Cyrillic glyph “Ж”). The second option is a bad hack that you should avoid completely as it goes against the notions of search, select, and copy available through SVG.

Without the right characters, all the niceties of SVG -- being indexable by search engines, and searchable within the browser -- are lost. If one is to cheat with the original characters, one might as well put a JPG with the rasterized glyphs.

The good news, on the other hand, is that many great―and free―fonts have support for non-Latin scripts. Take for example the following SVG document which uses the Cyrillic support of Arial to show Russian text:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="221" 
    width="237" xmlns:xlink="http://www.w3.org/1999/xlink">

<image height="221" width="237" y="0" x="0" xlink:href="lo.png"/>

  <text x="10" y="150"
           style="font-family: Arial; font-size:20pt;">
     И как они сумели  
   </text>
  <text x="70" y="190"
           style="font-family: Arial; font-size:30pt;fill:red">
        Лолите <tspan style="fill:black">?</tspan></text>
  <text x="10" y="170"
           style="font-family: Arial; font-size:20pt;">
   сделать фильм о </text>

</svg>

rasterized version for users without Russian support

Fig 5. lolita.svg

Note how the SVG source above uses real Cyrillic characters to write the Russian slogan, which in turn is real, selectable text in the final display (that is if your system has an Arial font that supports Cyrillic characters, otherwise you will likely see only a question mark). To see the nice side-effects of using real text try selecting the text and copy/pasting it to an application such as MS Word. Search engines can benefit also from the fact that is real text to index and search it. By the way, in case you are curious, the tagline reads “How did they ever make a film about Lolita?”

Pages: 1, 2, 3

Next Page