Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 17

17.2 SVG fonts mit Apache Batik erzeugen

Das Apache Batik Projekt stellt ein Programm zur Verfügung, das SVG fonts aus TrueType fonts erzeugen kann - den Font Converter.

Systemvoraussetzung für das Apache Batik Projekt ist eine Java Laufzeitumgebung. Stellen Sie also sicher, dass auf Ihrem System entweder die aktuelle JRE (Java Runtime Environment) oder J2SDK (Java Development Kit) installiert ist.
Nach Installation von Batik (auf Windows oder Linux) kann der Font Converter des batik-Projekts (batik-ttf2svg.jar) von der Kommandozeile gestartet werden.
Wechseln Sie zu diesem Zweck zuerst in das Installationsverzeichnis von batik.

Als Parameter erwartet das Programm zuerst den Pfad zur ttf-Datei, dann eine eindeutige ID für den SVG font (wird von batik im font-Element gesetzt) und anschließend den Pfad zur Output-Datei (dem SVG Dokument, das den SVG font beinhalten wird).
Mit dem Parameter -testcard werden zusätzlich alle Zeichen des neuen SVG fonts mit Hilfe von text-Elementen in das Dokument eingefügt.

Beispiel für die Erstellung eines SVG fonts "Comic Sans MS" aus dem gleichnamigen TrueType font:

      > java -jar batik-ttf2svg.jar c:\windows\fonts\comic.ttf -id comic -o comic.svg -testcard

Die Ausgabedatei comic.svg enthält nun den SVG font comic (basierend auf der Schriftart Comic Sans MS) und einige text-Elemente, die die Schriftzeichen darstellen.

Das folgende Beispiel ist aus Platzgründen reduziert. Um den kompletten Quellcode - wie ihn batik-ttf2svg.jar erzeugt hat - zu betrachten, rufen Sie bitte die Beispielgrafik auf. Über das Kontext-Menü "Quelle anzeigen" (erscheint nach Klick auf die rechte Maustaste) können Sie den kompletten Quellcode betrachten.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<font id="comic" horiz-adv-x="959">
<font-face font-family="Comic Sans MS"
    units-per-em="2048"
    panose-1="3 15 7 2 3 3 2 2 2 4"
    ascent="2257"
    descent="-597"
    alphabetic="0" />
<missing-glyph horiz-adv-x="1024"
  d="M128 0V1638H896V0H128ZM256 128H768V1510H256V128Z" />
<glyph unicode=" " glyph-name="space" horiz-adv-x="612" />
<glyph unicode="!" glyph-name="exclam" horiz-adv-x="487"
  d="M331 1516V403Q331 314 242 314Q153 314 153 403Q153 444 151 525
  T148 647Q148 792 150 1081T153 1516Q153 1605 242 1605Q331 1605 331 1516Z
  M332 23Q332 -13 304 -39T239 -66Q199 -66 159 -14Q120 35 120 76
  Q120 112 148 138T214 164Q253 164 294 112Q332 63 332 23Z" />
<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="869"
  d="M294 1116Q294 1099 299 1067T304 1018Q304 981 277 957T212 932
  Q116 932 116 1103Q116 1169 119 1301T122 1499Q122 1538 147 1563
  T211 1588Q250 1588 275 1563T300 1499Q300 1435 297 1308T294 1116Z
  M687 1495Q687 1479 684 1450T681 1408L672 1018Q670 928 583 928
  Q545 928 519 953T494 1016L503 1413Q505 1492 516 1524Q537 1584 598 1584
  Q637 1584 662 1559T687 1495Z" />
<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1726"
  d="M552 577H1052L1165 992H677L552 577ZM365 577L487 992
  H220Q125 992 125 1092Q125 1168 273 1168H537Q563 1284 616 1484
  Q645 1576 733 1576Q766 1576 787 1550T809 1491Q809 1451 783 1359
  Q739 1200 732 1168H1217Q1251 1289 1310 1491Q1336 1576 1408 1576
  Q1492 1576 1492 1498Q1492 1430 1409 1168H1604Q1706 1168 1706 1093
  Q1706 988 1593 988Q1578 988 1547 990T1500 992H1354L1248 577H1452
  Q1525 577 1555 566Q1607 546 1607 486Q1607 394 1520 394H1198L1108 69
  Q1081 -28 996 -28Q914 -28 914 51Q914 110 947 223Q993 380 996 394
  H496Q466 277 391 50Q362 -21 293 -21Q213 -21 213 58Q213 97 236 171
  Q271 283 306 394H115Q32 394 32 493Q32 532 66 556Q95 577 136 577H365Z" />
<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1420"
  d="M643 887V1246Q444 1171 444 1014Q444 917 643 887ZM821 676
  V156Q927 192 998 262Q1077 342 1077 435Q1077 609 821 676Z
  M821 1636V1467H825Q921 1467 1044 1434Q1205 1391 1205 1324
  Q1205 1236 1116 1236Q1076 1236 976 1257T821 1278V871
  Q1042 851 1167 726Q1281 610 1281 446Q1281 245 1142 113
  Q1019 -3 821 -40V-306Q821 -345 796 -370T731 -396Q643 -396 643 -308
  V-53Q155 -46 155 200Q155 290 238 290Q285 290 328 253Q392 198 425 181
  Q505 141 643 135V702H635Q480 708 367 778Q227 864 227 1017
  Q227 1154 355 1275Q473 1387 643 1438V1630Q643 1669 669 1695T735 1721
  Q821 1721 821 1636Z" />
<!-- ... -->
<!-- ... mehr Zeichendefinitionen folgen hier -->
<!-- ... -->
</font>
</defs>

<g style="font-family:Comic Sans MS; font-size:18px; fill:black">
<text x="20" y="60">
  !&quot;#$%&amp;&apos;()*+,-./0123456789:;&lt;&gt;?
</text>
<text x="20" y="120">
  @ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
</text>
<text x="20" y="180">
  `abcdefghijklmnopqrstuvwxyz|{}~
</text>
<text x="20" y="240">
  &#x80;&#x81;&#x82;&#x83;&#x84;&#x85;&#x86;&#x87;&#x88;&#x89;
  &#x8a;&#x8b;&#x8c;&#x8d;&#x8e;&#x8f;&#x90;&#x91;&#x92;&#x93;
  &#x94;&#x95;&#x96;&#x97;&#x98;&#x99;&#x9a;&#x9b;&#x9c;&#x9d;
  &#x9e;&#x9f;
</text>
<text x="20" y="300">
  &#xa0;&#xa1;&#xa2;&#xa3;&#xa4;&#xa5;&#xa6;&#xa7;&#xa8;&#xa9;
  &#xaa;&#xab;&#xac;&#xad;&#xae;&#xaf;&#xb0;&#xb1;&#xb2;&#xb3;
  &#xb4;&#xb5;&#xb6;&#xb7;&#xb8;&#xb9;&#xba;&#xbb;&#xbc;&#xbd;
  &#xbe;&#xbf;
</text>
<text x="20" y="360">
  &#xc0;&#xc1;&#xc2;&#xc3;&#xc4;&#xc5;&#xc6;&#xc7;&#xc8;&#xc9;
  &#xca;&#xcb;&#xcc;&#xcd;&#xce;&#xcf;&#xd0;&#xd1;&#xd2;&#xd3;
  &#xd4;&#xd5;&#xd6;&#xd7;&#xd8;&#xd9;&#xda;&#xdb;&#xdc;&#xdd;
  &#xde;&#xdf;
</text>
<text x="20" y="420">
  &#xe0;&#xe1;&#xe2;&#xe3;&#xe4;&#xe5;&#xe6;&#xe7;&#xe8;&#xe9;
  &#xea;&#xeb;&#xec;&#xed;&#xee;&#xef;&#xf0;&#xf1;&#xf2;&#xf3;
  &#xf4;&#xf5;&#xf6;&#xf7;&#xf8;&#xf9;&#xfa;&#xfb;&#xfc;&#xfd;
 &#xfe;&#xff;</text>
</g>
</svg>

Im defs-Bereich der vom Font Converter erzeugten SVG Grafik, finden Sie einen font-Bereich, der durch das öffnende und schließende font-Element definiert wird.

Innerhalb dieses font-Bereichs wird zuerst mit Hilfe des Elements font-face die Schriftbeschreibung definiert. Durch Attribute werden Name der Schriftart, die Rastergröße des em square und weitere Charakteristika der Schriftart festgelegt.
Anschließend werden einzelne Schriftzeichen durch die Elemente missing-glyph und glyph definiert.

Der so angelegte SVG font kann nun von jedem text-Element oder tspan-Element verwendet werden.
Dazu wird das Attribut font-family in dem jeweiligen text-Element verwendet. Als Wert erhält das Attribut die gleiche Angabe, wie das Attribut (der Deskriptor) font-family im font-face-Element.



index  |  Kapitel 17  |  17.1  <<  | 17.2 |  >>  17.3   Externe SVG Fonts