csssvgfontssvg-font

SVG image with embedded font example from W3.org doesn't work

I am trying to create an SVG image logo with simple graphic and only a couple of words of company name using non-standard font. To conserve the size I decided to embed only glyph's that needed for the words, instead of referring to the entire font. But the text is not shown using the custom (embedded) font. So I found a very similar example on the "most important website" - W3.org and to my surprise their example also doesn't work in most modern browsers.

Here's the link to the official SVG definition article with the example: https://www.w3.org/TR/SVGTiny12/fonts.html

And here's the link to the SVG example file in question: https://www.w3.org/TR/SVGTiny12/examples/font01.svg

Here's the code from the file:

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

It doesn't work, meaning the image is rendered, but with the wrong font, in:

However the sample image renders properly in older browsers:

What's going on? Please advice how can I reliably create SVG image with embedded font, without referring to the external files using CSS.

Solution

    1. Firefox has never supported SVG fonts because they are not suitable for many of the world's scripts such as devanagari.

    2. IE has never supported SVG fonts because they don't have widespread browser support.

    3. Chrome dropped support for SVG fonts due to lack of use and the above two reasons.

    4. Opera moved from its own rendering engine to using Chrome's Blink rendering engine after version 12 thereby falling under rule 3.

    5. Vivaldi also uses Blink as a rendering engine

    6. Maxthon uses Safari/Webkit as a rendering engine.

    No major browser does or will support SVG fonts and the SVG 2 specification has dropped them as a requirement. Other alternatives such as SVG glyphs in OpenType are being worked on.

    You can embed the non-SVG font as a data URI to have it work in an image.