HTML and CSS Reference
In-Depth Information
<text x=”100” y=”140”
style=”font-family: Arial;
font-size : 96pt;
stroke
: red;
fill
: url(#yellow_red);
”
>It was the best</text>
</svg>
SVG supports a method where you can embed a font into the
document. Embedding a font in SVG is, however, tricky. The chal-
lenge is that to embed a font you must specify the exact shape of
each font glyph you use. A glyph is a shape matched to a key on
your keyboard. Figure 3.27 is a glyph of the letter “A.”
SVG's GLYPH element draws the outline of the font and ties it
to a character. This can get complex very quickly. The following is
an example of what you will need to duplicate just the letter “a” as
a reusable glyph in SVG.
Figure 3.27
A glyph of the
letter “A.”
<glyph unicode=”a” glyph-name=”a” horiz-adv-x=”577”
d=”M595 -324H-36V898H595V-324ZM117 27Q123 25 130
20T146 29Q154 41 159 59T166 86Q169 96 167 103T172
113Q181 115 185 106T202 97Q213 97 227 102T273
108Q306 108 320 105T347 109Q359 115 370 123T387
127Q388 126 393 118T403 101T412 82T417 67Q420 57
426 41T451 23Q471 19 477 25T486 47Q491 60 478
71T460 96Q457 102 448 126T426 178T404 235T387
279Q382 296 372 321T351 371T332 416T321 443Q318
448 317 460T313 485T307 510T297 528Q291 533 284
528T271
516T261 500T254 485Q253 473 257 464T261 448Q261
442 255 434T245 414Q241 405 240 397T238 381Q238
373 220 338T189 265Q177 230 176 217T172 194Q171
186 166 169T151 138Q147 128 138 112T120 78T110
44T117 27ZM366 235Q375 218 377 201T376 169Q375 163
368 162T351 163T329 168T310 171Q280 171 269
176Q265 180 256 176T228 165Q208 158 201 159T187
164Q183 165 186 172T195 189T207 208T215 228Q217
237 224 257T240 299T255 337T261 355Q261 359 256
362T245 369Q242 370 249 377T262 392Q269 402 271
408T282
411Q286 409 298 385T324 330T351 271T366 235ZM243
222L250 238Q254 246 257 253T261 264Q267 272 268
284Q269 292 272 302Q267 298 262 285T253 256Q247
238 243 222ZM294 186Q292 193 288 201T277 207Q272
205 265 205H257L294 186ZM201 78L340 83Q328 86 306
