SVG – Learning by Coding
1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
4: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
5: ]>
6:
7: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
8: <!-- Author: Dr. Thomas Meinike 01/04 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11:
12: <title>SVG - Learning by Coding</title>
13: <desc>SVG-Spezifikation in Beispielen</desc>
14: <text x="20" y="30" style="fill: #000; font-size: 24px">
15: Elemente font | font-face | glyph | missing-glyph</text>
16:
17: <!-- weitere Elemente aus dem Bereich Schriften:
18: font-face-format, font-face-name, font-face-src, font-face-uri,
19: altGlyph, altGlyphDef, altGlyphItem, glyphRef, hkern, vkern
20: -->
21:
22: <defs>
23:
24: <!--
25: Der Inhalt des folgenden font-Elements ist das Ergebnis der Verwendung des
26: Batik Font Converter Utilitys ttf2svg
27: Beispielaufruf (-l = Startwert, -h = Endwert):
28: java -jar batik-ttf2svg.jar cfmingeb.ttf -l 39080 -h 39080 -id zeichen -o out.svg
29:
30: Copyright notice:
31: This document was created for educational purposes only!
32: The sample code uses the SVG glyph representations of three
33: unicode characters from the True Type Font file CFMINGEB.TTF.
34: (C) by TwinBridge Software Corporation - http://www.twinbridge.com/
35: -->
36:
37: <font id="zeichen" horiz-adv-x="512">
38: <font-face
39: font-family="TSC FMing S TT"
40: units-per-em="1024"
41: panose-1="2 1 6 9 3 1 1 1 1 1"
42: ascent="819"
43: descent="-204"
44: alphabetic="0"/>
45:
46: <!-- Ersatzzeichen fuer nicht definierte Glyphen -->
47: <missing-glyph horiz-adv-x="1024"
48: d="M5 -204H1019V819H5V-204ZM10 -199V814H1014V-199H10Z"/>
49:
50: <!-- Beschreibung fuer das Unicode-Zeichen 26085 (Hex-Wert: 65E5) -->
51: <glyph unicode="日" glyph-name="sonne" horiz-adv-x="1024"
52: d="M236 344H744V676H236V344V344ZM236 -28H744V320H236V-28V-28ZM792 -88L780 -104L760
53: -108L744 -104V-52H236V-104L204 -124L188 -120V736L216 724L252 700H728L760 744L772
54: 740L828 704V696V684L800 636L792 580V-88V-88V-88Z"/>
55:
56: <!-- Beschreibung fuer das Unicode-Zeichen 38632 (Hex-Wert: 96E8) -->
57: <glyph unicode="雨" glyph-name="regen" horiz-adv-x="1024"
58: d="M224 436H228H248L320 396L380 352L392 328L396 308V296L380 284L360 300L344
59: 324L320 356L280 388L232 428L224 436V436ZM232 212L220 224L252 216L336 168L396
60: 120L400 88L396 68L388 60L368 80L344 108L316 144L276 176L232 212V212V212ZM588
61: 424H592H612L704 380L768 340L784 312L788 288L784 276L772 272L760 280L744 300L680
62: 356L596 416L588 424V424ZM604 212L592 224H596L620 220L712 172L780 120L792 88L788
63: 72L772 64L760 72L748 92L728 116L696 144L656 176L604 212V212V212ZM852 568H872L920
64: 532L924 524L920 516L908 492L904 468V-40L896 -76L880 -104L852 -128L820 -152L796
65: -132V-128L780 -120L748 -108L712 -96L664 -80L648 -76L652 -72L672 -68L820 -88L848
66: -72L860 -40V520H520V-112L488 -124L476 -112V520H140V-120L116 -136L100 -128V576L120
67: 564L140 540H472V708H56L40 716L48 720L72 728H856L900 768H904H916L980 720V712L968
68: 704H516V540H832L852 568V568Z"/>
69:
70: <!-- Beschreibung fuer das Unicode-Zeichen 39080 (Hex-Wert: 98A8) -->
71: <glyph unicode="風" glyph-name="wind" horiz-adv-x="1024"
72: d="M484 184V4L648 24L628 52L612 76L584 104H588L604 100L620 92L668 52L720 4L732
73: -28L740 -52L732 -76H728L704 -64L680 -20L660 8L580 -8L508 -24L448 -32L392
74: -44L348 -52L312 -60L284 -68L264 -72L252 -100L236 -108L224 -100L204 -28L444
75: -4V184H324V144L308 124L292 116L280 124V444H288H292L340 420H444V564L268
76: 548H256L232 552L236 556L256 560L344 576L424 592L504 612L572 636L592 644L628
77: 632L672 608L652 592L624 600L600 592L572 588L532 580L484 572V420H592L624
78: 448L628 452L644 448L680 416L684 400L680 388L664 364L660 336V300V152L632
79: 140L616 152V184H484V184ZM444 396H324V208H444V396V396ZM612
80: 396H484V208H612V396V396ZM780 760L792 764L804 760L844 724L848 716L840
81: 708L824 684L816 636L808 568L804 476L808 372L816 268L836 168L860 76L892 -8L912
82: -32L924 -28L936 -8L964 100L980 136V124V108L968 24L960 -40L964 -76L968 -100L972
83: -120L956 -140H944L908 -108L876 -64L848 -12L824 48L796 132L780 224L764 332L756
84: 448V704H180V360L164 204L140 68L104 -40L60 -128L40 -148L36 -144L40 -136L48
85: -120L64 -80L80 -36L92 16L104 76L112 144L120 220L128 300L136 392V748L148
86: 756H152L192 728H756L780 760V760Z"/>
87:
88: </font>
89:
90: </defs>
91:
92: <text x="30" y="70" style="font-size: 18px">
93: Zeichen und Bedeutung im Japanischen</text>
94: <!-- Dank an Sophie fuer die Japanisch-Beratung ;-) -->
95:
96: <g style="font-family: 'TSC FMing S TT'; font-size: 36px; fill: #F00">
97: <!-- Test mit den drei definierten Zeichen -->
98: <text x="30" y="120">日</text>
99: <text x="30" y="170">雨</text>
100: <text x="30" y="220">風</text>
101: <!-- Test mit fehlendem Zeichen (Unicode-Zeichen 39000 (Hex-Wert: 9858) -->
102: <text x="30" y="270">願</text>
103: </g>
104:
105: <g style="font-family: sans-serif; font-size: 22px; fill: #000">
106: <text x="75" y="120">Sonne (&#x65e5;)</text>
107: <text x="75" y="170">Regen (&#x96e8;)</text>
108: <text x="75" y="220">Wind (&#x98a8;)</text>
109: <text x="75" y="270">missing glyph (&#x9858;)</text>
110: </g>
111:
112: <g style="font-size: 12px">
113: <text x="30" y="320">Hinweis: Die Zeichen wurden mit dem</text>
114: <a xlink:href="http://xml.apache.org/batik/ttf2svg.html" target="_top">
115: <text x="235" y="320" style="fill: #00C">Batik Font Converter Utility ttf2svg
116: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
117: <set attributeName="text-decoration" attributeType="CSS" to="underline"
118: begin="mouseover"/>
119: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
120: <set attributeName="text-decoration" attributeType="CSS" to="none"
121: begin="mouseout"/>
122: </text>
123: </a>
124: <text x="420" y="320">aus der</text>
125: <a xlink:href="http://www.twinbridge.com/" target="_top">
126: <text x="465" y="320" style="fill: #00C">Fontdatei CFMINGEB.TTF
127: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
128: <set attributeName="text-decoration" attributeType="CSS" to="underline"
129: begin="mouseover"/>
130: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
131: <set attributeName="text-decoration" attributeType="CSS" to="none"
132: begin="mouseout"/>
133: </text>
134: </a>
135: <text x="80" y="340">in SVG-Pfadbeschreibungen umgewandelt. Das vierte Zeichen
136: existiert nicht und es wird somit das <tspan x="80" dy="20">als
137: missing-glyph definierte Ersatzzeichen verwendet.</tspan>
138: </text>
139: </g>
140:
141: </svg>
[zum Anfang]