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: 
<!--    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="&#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-Wert: 96E8) -->

 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-Wert: 98A8) -->

 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-Wert: 9858) -->

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 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]