CODEWITHSUNDEEP
fontssvg
David Jones
David Jones

Reputation: 10219

Drawing glyphs in an SVG using glyph names

In the following block of code (taken from here), a font is embedded in an SVG file. Text is then rendered using the following line:

<text x="40" y="50" font-family="larabie-anglepoise" font-size="70" fill="#933">SVG</text>

In this line, the glyphs are referenced by their Unicode values (S, V, and G). However, not all glyphs have Unicode values (alternates, decorative, etc.) How would one go about rendering text by referencing glyph names or IDs instead of Unicode values?

Here is the full code for reference:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" viewBox="0 0 160 70"  xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Font example</title>
    <defs>
        <font horiz-adv-x="313" xml:id="la">
            <metadata>Converted from Larabie Anglepoise by Batik ttf2svg
            See http://www.larabiefonts.com/ </metadata>
            <font-face font-family="larabie-anglepoise" units-per-em="1000" 
                panose-1="0 0 4 0 0 0 0 0 0 0" ascent="703" descent="-300" alphabetic="0"/>
            <missing-glyph horiz-adv-x="500" d="M63 0V700H438V0H63ZM125 63H375V638H125V63Z"/>
            <glyph unicode="S" glyph-name="S" horiz-adv-x="385" d="M371 1H29V144H264Q264 151 264
                166Q265 180 265 188Q265 212 249 212H132Q83 212 55 247Q29 279 29
                329V566H335V422H136V375Q136 360 144 356Q148 355 168 355H279Q327 355 352 309Q371 273
                371 221V1Z"/>
            <glyph unicode="V" glyph-name="V" horiz-adv-x="351" d="M365 563L183 -33L0 563H101L183
                296L270 563H365Z"/>
            <glyph unicode="G" glyph-name="G" horiz-adv-x="367" d="M355
                1H18V564H355V420H125V144H248V211H156V355H355V1Z"/>
            <hkern g1="V" g2="G" k="-40"/>
        </font>
    </defs>
    <text x="40" y="50" font-family="larabie-anglepoise" font-size="70" fill="#933">SVG</text>
    <rect x="00" y="00" width="160" height="70" stroke="#777" fill="none"/>
</svg>

Upvotes: 0

Views: 7232

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

You'd use <altGlyph>. A simple example:

<text>
  <altGlyph xlink:href="#myFooGlyph">foo</altGlyph>
</text>

If you have a <glyph> with the id myFooGlyph in the font used for rendering the text, then that glyph will be rendered. If not, then you'll see the string foo rendered instead (also happens if SVG Fonts aren't supported).

Upvotes: 1

Related Questions