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 02/03 - 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:
15: <defs>
16:
17: <style type="text/css">
18: <![CDATA[
19:
20: text{font-size: 36px; fill: #F00;}
21: .t1{font-family: f1;}
22: .t2{font-family: f2;}
23: .t3{font-family: f3;}
24: .t4{font-family: f4;}
25: .t5{font-family: f5;}
26: .t6{font-family: f6;}
27: .t7{font-family: f7;}
28: .t8{font-family: f8;}
29: .t9{font-family: f9;}
30:
31: @font-face{font-family:f1;src:url("data:;base64,\
32: T1RUTwACACAAAQAAQ0ZGIFSI06IAAAAsAAACJ2NtYXAACwA+AAACVAAAADQBAAQCAAEBARBNb25v\ 33: dHlwZUNvcnNpdmEAAQEBPfgbAfgYBB4UoJmZHwwC/H/9CBwJRRwHTQUeoABIgoEl/4uLHqAASIKB\ 34: Jf+LiwwH92UP92oQ92wRi/i7EgABAQFyTW9ub3R5cGUgQ29yc2l2YShUTSkgaXMgYSB0cmFkZW1h\ 35: cmsgb2YgVGhlIE1vbm90eXBlIENvcnBvcmF0aW9uIHdoaWNoIG1heSBiZSByZWdpc3RlcmVkIGlu\ 36: IGNlcnRhaW4ganVyaXNkaWN0aW9ucy4AAAAAAQAiAAAAAwIAAQAdACABRRwGAPeUFhwFAPqUHPsA\ 37: B/50qxX6VBwEwP5UBg74Vg4cBPYcBRO3FYFSBYlzdop5G3FsjY9mH5JMZI56G29gh4JRH6C/nMKZ\ 38: xJW0ltGW7j2M+w2J+ziH+z37l/sQ+zY8SQhIPD9qRBtmb5KaeR94mYKdohqckJqWlh6WlpiRmxuU\ 39: mImImx+Cs6aGmBu4vKS+wR/j3vcW90H3QPec91f3v/cx9233Dfcc+zl8JX1iflN5YXBvaAhvaH1n\ 40: Zhp/j3qUdR6UcpB5gBp8hX6AgB6AgH2Fext0eZScfh99nISkrRq7mLqkuB6kuK6wuqq6qcWi0Zuv\ 41: lMqS5pLakryRn5GqlKmcqKR3OX1Dgk49/NYYXvwyBX68uIWyG6WnjpGqH/vW+BsVq/ejq/dZq/cR\ 42: NvsEV0R3bvuV/BEYicLaivIbpKaMjagfDgAAAAABAAAAAwAAAAwABAAoAAAABgAEAAEAAgAgAEH/\ 43: /wAAACAAQf///+H/wQABAAAAAAAA")} 44:
45: @font-face{font-family:f2;src:url("data:;base64,\
46: T1RUTwACACAAAQAAQ0ZGILEkBhkAAAAsAAAB0GNtYXD/xgB3AAAB/AAAACwBAAQCAAEBAQhHZW9y\ 47: Z2lhAAEBATT4GwH4GAT79/xQHAlVHAdMBR6gAEiCgSX/i4seoABIgoEl/4uLDAf3Ew+MEPcWEYv4\ 48: ZBIAAQEBMUdlb3JnaWEgaXMgYSB0cmFkZW1hcmsgb2YgTWljcm9zb2Z0IENvcnBvcmF0aW9uLgAA\ 49: AAAjAAICAAEAIgFGHAgA95QWHAYAHAYAHPoABxz6gPcUFRwFABwFABz7AAYOHAU7+uT5KRW0b65m\ 50: pl4Ipl6ZVEoaSX1SbloeblpmY11sXmxZdFN7CHtSUYNPG/000gabjKKOqpCqj6GQmJGglJmYlJsI\ 51: lJqPn6Qa+pAHooefhJweg5x8mXSWd5V1k3KQcpB3j3qMCNL5Iwe+u4aBuh+5gbd5tXKydKxrpGMI\ 52: pGOYWlIaWYJfeWQeeWRyaWpvbHBodWR5Y3hgfV2BCIIHtIa4gb58vXu4dbJvCPuF92oVpKicqpWt\ 53: CJStkLO6Gtl2yGC4HrdgSKEvG3Zwi4prH2qKcIp1igj8tfcTB8K6kpmyH7KZqqCjpwj3HvxZFd9v\ 54: 0FPBHsFSO6YiG2Bni4puH26KdYp8igj8iAdhnGutdh52rbqAyBvu16jFwB/AxaXg9wUaDgAAAAEA\ 55: AAADAAAADAAEACAAAAAEAAQAAQAAAEL//wAAAEL///+/AAEAAAAAFSIVIqbeCAAAAAAAGiIZIgAA\ 56: ")}
57:
58: @font-face{font-family:f3;src:url("data:;base64,\
59: T1RUTwADACAAAQAQQ0ZGINuZPHcAAAA8AAABb0dQT1Ov5r8UAAAB2AAAAFBjbWFw/8UAeAAAAawA\ 60: AAAsAQAEAgABAQENTXlyaWFkLVJvbWFuAAEBAR/4GwH4GARd+476+vnTBR0AAKQDDfd8D/d/Eb/3\ 61: zxIAAQEBqkNvcHlyaWdodCAoYykgMTk5MiwgMTk5NCBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRl\ 62: ZC4gIEFsbCBSaWdodHMgUmVzZXJ2ZWQuTXlyaWFkIGlzIGEgdHJhZGVtYXJrIG9mIEFkb2JlIFN5\ 63: c3RlbXMgSW5jb3Jwb3JhdGVkIG1heSBiZSByZWdpc3RlcmVkIGluIGNlcnRhaW4ganVyaXNkaWN0\ 64: aW9ucy4AAAAAJAACAQEES/doDvjYgNX4udQBr+cD+KXmFXpoVYBVG/s3LPT3OvdF9PD3MsO6f3ur\ 65: H6HSBZd0VZ04G/tl+yP7Ivto+3L3IvsM91LdzJubqh8OgJb5Npb7XZf3Lpa8lgb3mZD8ZpFwlAce\ 66: oGBFgpn/DAkeegmZmZ8MCs4K4wvOkQwM448MDQAAAAABAAAAAwAAAAwABAAgAAAABAAEAAEAAABD\ 67: //8AAABD////vgABAAAAAAABAAAACgAeACwAAURGTFQACAAEAAAAAP//AAEAAAABa2VybgAIAAAA\ 68: AQAAAAEABAACAAAAAQAIAAEAEgAEAAAAAQAMAAEAAf/oAAEAAQABAAAAAAAAAAAAAAAAAAAAAAAA\ 69: ")}
70:
71: @font-face{font-family:f4;src:url("data:;base64,\
72: T1RUTwACACAAAQAAQ0ZGIKm4P48AAAAsAAABIGNtYXD/xAB5AAABTAAAACwBAAQCAAEBAQdJbXBh\ 73: Y3QAAQEBNPgbAfgYBPud/TkcChccCVgFHqAASIKBJf+Lix6gAEiCgSX/i4sMB/cbD4wQ9x4Ri/e0\ 74: EgABAQE6SW1wYWN0IGlzIGEgdHJhZGVtYXJrIG9mIFN0ZXBoZW5zb24gQmxha2UgKEhvbGRpbmdz\ 75: KSBMdGQuAAAAACUAAgEBHZEcBgD3lBYcBQD6lBz7AAf+dKsV+lQcBMD+VAYOHARs3xwGUxX3zwb3\ 76: X/cegnjTH9J4wm2wYLBgo1yUVwiUVpAk+y0a/MsH+yWEKn5aHn1ac2RpcGlvYXhZgAiAWUCFJhv8\ 77: pwb4ORwFPhX+vQfIsJekmR+Zo5LN9wAa+QkH1Im6hqAehqCBmnqVCJR6bJBdGw4AAAABAAAAAwAA\ 78: AAwABAAgAAAABAAEAAEAAABE//8AAABE////vQABAAAAAJb5Npb7XZf3Lpa8lgb3mZD8ZpFwlAce\ 79: oGBFgpn/DAkeegmZmZ8MCs4K4wvOkQwM448MDQAAAAABAAAAAwAAAAwABAAgAAAABAAEAAEAAABD\ 80: //8AAABD////vgABAAAAAAABAAAACgAeACwAAURGTFQACAAEAAAAAP//AAEAAAABa2VybgAIAAA+\ 81: AEEAAQBcAWgDfARoA3wELQFfAS4BYAEvAWEBMAH4ADEB1QAyATgBMwE5ATQBYgE1AWMBNgFkATcB\ 82: ")}
83:
84: @font-face{font-family:f5;src:url("data:;base64,\
85: T1RUTwACACAAAQAAQ0ZGIG8g25IAAAAsAAABA2NtYXD/wwB6AAABMAAAACwBAAQCAAEBARFIYWV0\ 86: dGVuc2Nod2VpbGVyAAEBATX4GwwA+BgE+3j9ORwIDBwIOgUeoABIgoEl/4uLHqAASIKBJf+LiwwH\ 87: 91QPjBD3VxGL95cSAAEBAWhEYXRhIGJ5IEVyYW1hbiBMdGQuLCBhbmQgTW9ub3R5cGUgVHlwb2dy\ 88: YXBoeSBJbmMuIChDKSAxOTk1LiBNaWNyb3NvZnQgQ29ycG9yYXRpb24uIEFsbCByaWdodHMgcmVz\ 89: ZXJ2ZWQuAAAAACYAAgEBHTscBgD3lBYcBQD6lBz7AAf+dKsV+lQcBMD+VAYO+TD5Hxb8/BwFmvj4\ 90: +037vfwX96D7Qvug/Iz3wQYOAAAAAAEAAAADAAAADAAEACAAAAAEAAQAAQAAAEX//wAAAEX///+8\ 91: AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\ 92: AAAAAAAAAAAAAACAPwAAgD8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\ 93: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAs\ 94: AEEAAQCAP9gCfATYAnwEAAAAAM3MTD0AAAAAAAAAAAIAAAACAAAAAwAAAAEAAAAAAAAAaEkcbgQA\ 95: ")}
96:
97: @font-face{font-family:f6;src:url("data:;base64,\
98: T1RUTwACACAAAQAAQ0ZGIO64Q5IAAAAsAAABZ2NtYXAACwA5AAABlAAAADQBAAQCAAEBAQhTeWxm\ 99: YWVuAAEBATX4GwH4GAT76PzwHAtbHAgOBR6gAEiCgSX/i4seoABIgoEl/4uLDAf3FA/3GRD3GxGL\100: 9/sSAAEBATFTeWxmYWVuIGlzIGEgdHJhZGVtYXJrIG9mIE1pY3Jvc29mdCBDb3Jwb3JhdGlvbi4A\101: AAAAAQAnAAAAAwEBHSDa+pT3FBYcBdD5lBz6MAf9FPcUFfiUHATQ/JQGDviUDvrc+qgcBWIVko+I\102: hB/71QeEh4eEHkAGhIeOkB9j93wFkIeOhB78VAaEiIiEH/ytB4aOiJIe96IGko6OkB+g9zoFkI6O\103: kh7CBpKPiIQf/EgHhIeIhB5UBoSIjpAfdvc8BZCIjoQe+6IGhIiIhh/8pweEjoiSHvdCewWSjoeE\104: H1YHhIiIhB78twaEiI6SH8AHko6Pkh73QpsFko6Okh8cBJ4Hj4qJjYgbhwb7QpwFhIiOkh/AB5KO\105: jpAeDgAAAAABAAAAAwAAAAwABAAoAAAABgAEAAEAAgAgAEb//wAAACAARv///+H/vAABAAAAAAAA\106: i4p7H4pseouIG3yAiIWGH4WFiIB7GoxFBYCJTIj7Bx6KdIt3fBowjj8BEQFAARIBa2VybgAIAAAD\107: AEEAAAEIAJj8fARwI2AKuB5gCgAAgD8LAAMAAAEIAMgGYApY1nwEkKJgCjguODgyIDc0Ny43NDMg\108: ")}
109:
110: @font-face{font-family:f7;src:url("data:;base64,\
111: T1RUTwACACAAAQAAQ0ZGIN8TDhUAAAAsAAABn2NtYXD/wQB8AAABzAAAACwBAAQCAAEBARVOZXdC\112: YXNrZXJ2aWxsZS1Sb21hbgABAQEh+BsB+BkE+2H7pBwEt/oeBR0AAKM+DfeHD/eKEaf4FxIAAQEB\113: q0NvcHlyaWdodCAoYykgMTk4NSwgMTk4NywgMTk5MCwgMTk5NCBBZG9iZSBTeXN0ZW1zIEluY29y\114: cG9yYXRlZC4gIEFsbCBSaWdodHMgUmVzZXJ2ZWQuSVRDIE5ldyBCYXNrZXJ2aWxsZSBpcyBhIHJl\115: Z2lzdGVyZWQgdHJhZGVtYXJrIG9mIEludGVybmF0aW9uYWwgVHlwZWZhY2UgQ29ycG9yYXRpb24u\116: AAAAACgAAgEBBIj3mA75eH6m93+i90z3WoaiErr3Efgf9wY//wAagAAT3BPq+RH5IhWABhPadl4F\117: uE9BnUEb+2X7Ifsv+2D7Wvch+xT3V8S8l6W+HxPcrcmRk9Qb9Qe9k6bBih6i+5p0B8iGpH5IGiRI\118: XCf7PlH3J/cq9zK190j3Vx4T2vcI1Dr7BJIfE+qgBg53n/kkn/uNmPeGiwb7pKAHHqBDeRf/DAmm\119: CuALAAAAAAEAAAADAAAADAAEACAAAAAEAAQAAQAAAEf//wAAAEf///+6AAEAAAAAG5SYiYibH4Iz\120: AEEAAQEIAGD1fAQFAAAAAAAAAAAAAAAAAIlEAQAAAACApUMBAAAAAADGQwEAAAAIAAAAAACgwQAA\121: ")}
122:
123: @font-face{font-family:f8;src:url("data:;base64,\
124: T1RUTwACACAAAQAAQ0ZGINRe400AAAAsAAADJmNtYXD/wAB9AAADVAAAACwBAAQCAAEBAQlHYXJh\125: bW9uZAABAQE0+BsB+BgE+7D9CBwIgRwH5AUeoABIgoEl/4uLHqAASIKBJf+LiwwH91UPjBD3WBGL\126: +boSAAEBAXJNb25vdHlwZSBHYXJhbW9uZChSKSBpcyBhIHRyYWRlbWFyayBvZiBNb25vdHlwZSBU\127: eXBvZ3JhcGh5LCBMdGQgd2hpY2ggbWF5IGJlIHJlZ2lzdGVyZWQgaW4gY2VydGFpbiBqdXJpc2Rp\128: Y3Rpb25zLgAAAAApAAICAAEAHAJaHAYAiwQcBQD6lBz7AAf+dKsV+lQcBMD+VAYOHAYVsnwVjKGi\129: mKWTqY4ZupGpkZiSmJGUlJCWCJShkKGiGonXjNGJ3QWtjLaNvh6Nvoymjhr3pQe2jLqNvh6NvYyu\130: nhrEiq2IlB6IlIaShI+Ej3OPYo5sjnWNf40IiJKJkZAakIuSjJIejJuXjJQb6YoFztGOkNYfsI7C\131: jdWNCIyFjIWGGoSKhoiIHoiHhYiEijSEV4B8fQh7fINnUBr7AI37A477Bx6PLY6It4jehxmKopiK\132: jxv3J43siPeSk6qMnoySjRmP9wiN9wT3ARr0iciGnh6IloeThI+HjWiQSpSAjICNgY0IiJWJlpga\133: jqKZjZEbzYcFiMjIicgbss2OkuYfin6Kf4iAcoFshWiIdIp4h3yFCH6ChXhuGoSLhIyDHoxzi3uE\134: GvsHB4xDiS6M+0KJ+zgFaoxYjUYeivsbBV6PapN4Ho+CkoSUh9x5GLOBo4OThQiShI+EghqIf4aK\135: BYiGjIyGH5hCP5I7G0xfiolxH3CJVIQ4fgiKlIqRjxqQjJGMkx6gl6uTuJCsjqaWnp0ImJeRnaIa\136: ivckBY22jKOPGsSK3Yn3AR6JlIeRho15kTKK+zOCCIlrc4p7G3tqjI1YH4xYW4xgG3R3i4p7H4ps\137: eouIG3yAiIWGH4WFiIB7GoxFBYCJTIj7Bx6KdIt3fBowjk6SbR6OfZGBlIaRh6WEuYGqhKKFm4WR\138: gRiIioiIiR6Ih4WJhBuGhIuMhB+EfIuMdh9pjGGNWI8IjmpujHIbYEeJhy0finl8i34bDgAAAAAA\139: AQAAAAMAAAAMAAQAIAAAAAQABAABAAAASP//AAAASP///7kAAQAAAAA=")}140:
141: @font-face{font-family:f9;src:url("data:;base64,\
142: T1RUTwACACAAAQAAQ0ZGIGdE0cMAAAAsAAAAzmNtYXD/vwB+AAAA/AAAACwBAAQBAAEBAQ5MdWNp\143: ZGFDb25zb2xlAAEBATP4GwH4GASL/EQcBNIcBlAFHqAASIKBJf+Lix6gAEiCgSX/i4sMB/chD4wQ\144: 9yQRj/deEgABAQE6THVjaWRhIGlzIGEgcmVnaXN0ZXJlZCB0cmFkZW1hcmsgb2YgQmlnZWxvdyAm\145: IEhvbG1lcyBJbmMuAAAAACoAAgEBGjX3lBYcBQD5Zhz7AAf9JssV+OYcBID85gYO90EW9yj37fpv\146: ++33KPoM+yj77f5v9+37KAcOHATSFAAAAAAAAQAAAAMAAAAMAAQAIAAAAAQABAABAAAASf//AAAA\147: Sf///7gAAQAAAAD3mA75eH6m93+i90z3WoaiErr3Efgf9wY//wAagAAT3BPq+RH5IhWABhPadl4F\148: uE9BnUEb+2X7Ifsv+2D7Wvch+xT3V8S8l6W+HxPcrcmRk9Qb9Qe9k6bBih6i+5p0B8iGpH5IGiRI\149: XCf7PlH3J/cq9zK190j3Vx4T2vcI1Dr7BJIfE+qgBg53n/kkn/uNmPeGiwb7pKAHHqBDeRf/DAmm\150: CuALAAAAAAEAAAADAAAADAAEACAAAAAEAAQAAQAAAEf//wAAAEf///+6AAEAAAAAG5SYiYibH4Iz\151: AEEAAQEIAHCrYAoBAAAAAAARRAEAAAAAAIlEAQAAAACApUMBAAAAAADGQwEAAAAIAAAAAACgwQAA\152: ")}
153:
154: ]]>
155: </style>
156:
157: </defs>
158:
159: <text x="20" y="30" style="fill: #000; font-size: 24px">
160: Eingebettete Font-Glyphen</text>
161: <text x="25" y="50" style="fill: #000; font-size: 12px">
162: [Jeder Buchstabe stammt aus einem anderen Font.]</text>
163:
164: <text x="20" y="110" style="pointer-events: none">
165: <tspan class="t1">A</tspan>
166: <tspan class="t2">B</tspan>
167: <tspan class="t3">C</tspan>
168: <tspan class="t4">D</tspan>
169: <tspan class="t5">E</tspan>
170: <tspan class="t6">F</tspan>
171: <tspan class="t7">G</tspan>
172: <tspan class="t8">H</tspan>
173: <tspan class="t9">I</tspan>
174: </text>
175:
176: </svg>
[zum Anfang]