SVG – Learning by Coding

[ font-related.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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-formatfont-face-namefont-face-srcfont-face-uri,
 19:        altGlyphaltGlyphDefaltGlyphItemglyphRefhkernvkern
 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 (-Startwert, -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:       (Cby 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-Wert65E5) -->
 51:       <glyph unicode="&#x65e5;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-Wert96E8) -->
 57:       <glyph unicode="&#x96e8;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-Wert98A8) -->
 71:       <glyph unicode="&#x98a8;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">&#x65e5;</text>
 99:     <text x="30" y="170">&#x96e8;</text>
100:     <text x="30" y="220">&#x98a8;</text>
101:     <!-- Test mit fehlendem Zeichen (Unicode-Zeichen 39000 (Hex-Wert9858) -->
102:     <text x="30" y="270">&#x9858;</text>
103:   </g>
104: 
105:   <g style="font-family: sans-serif; font-size: 22px; fill: #000">
106:     <text x="75" y="120">Sonne (&amp;#x65e5;)</text>
107:     <text x="75" y="170">Regen (&amp;#x96e8;)</text>
108:     <text x="75" y="220">Wind (&amp;#x98a8;)</text>
109:     <text x="75" y="270">missing glyph (&amp;#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 umgewandeltDas 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]