SVG-изображение со встроенным шрифтом из W3.org не работает

Question

Я пытаюсь создать логотип изображения SVG с простой графикой и всего несколькими словами названия компании, используя нестандартный шрифт. Чтобы сохранить размер, я решил вставить только глиф, который нужен для слов, вместо того, чтобы ссылаться на весь шрифт. Но текст не показан с использованием пользовательского (встроенного) шрифта. Поэтому я нашел очень похожий пример на «самом важном веб-сайте» - W3.org, и, к моему удивлению, их пример также не работает в большинстве современных браузеров.

Вот ссылка на официальную статью определения SVG на примере: https://www.w3.org/TR/SVGTiny12/fonts.html

А вот ссылка на пример файла SVG в вопросе: https://www.w3.org/TR/SVGTiny12/examples/font01.svg

Вот код из файла:

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

Это не работает, то есть изображение отображается, но с неправильным шрифтом, в:

• Chrome v. 55.0.2883.87
• Firefox v. 47.0.2
• Internet Explorer v. 10.0.9200
• Opera v. 42,0
• Вивальди v. 1.2.490.43

Однако образец изображения делает правильно в старых браузерах:

• Op эпоха против 12,17
• Safari v. 5.1.4
• Maxthon v. 4.4.5.3000

Что происходит? Пожалуйста, совет, как я могу надежно создавать SVG-изображение со встроенным шрифтом, не обращаясь к внешним файлам с помощью CSS.

Answer 1

1. Firefox никогда не поддерживал шрифты SVG, потому что они не подходят для многих мировых скриптов, таких как devanagari.

2. IE никогда не поддерживал шрифты SVG, потому что у них нет широко распространенной поддержки браузеров.

3. Хром dropped support for SVG fonts из-за отсутствия использования и вышеуказанных двух причин.

4. Opera переехал из своего собственного движка визуализации с помощью Blink рендеринга Chrome после версии 12, таким образом, подпадает под правило 3.

5. Вивальди также использует Blink как движок рендеринга

6. Maxthon использует Safari/Webkit как механизм рендеринга.

Ни один крупный браузер не поддерживает или не поддерживает шрифты SVG, и спецификация SVG 2 отбросила их в качестве требования.В настоящее время разрабатываются другие альтернативы, такие как SVG glyphs in OpenType.

Вы можете встроить шрифт не SVG в качестве URI данных, чтобы он работал на изображении.