Svg @font-face работает в svg, но не при включении в страницу

У меня есть svg файл, который содержит определенный шрифт с использованием синтаксиса @font-face. Этот svg находится в /logo/logo-big-web.svg, а шрифт находится на /font/MDN/MDN.ttf на сервере.

Все работает нормально, когда я открываю http://www.mywebsite/logo/logo-big-web.svg в браузере, шрифт загружается правильно, и файл svg отображается правильно.

Однако, когда я пытаюсь вставить файл svg в html файл, например, в index.html:

<img src="/logo/logo-big-web.svg" ... ></img>

Когда я открываю http://www.mywebsite/index.html в браузере, шрифт не загружается должным образом, а svg отображает уродливый шрифт по умолчанию.

Кто-нибудь еще испытал эту проблему? Как обойти это?

Я знаю, что я мог бы вставлять шрифт в виде SVG-глифов внутри файла svg, но это не работает в firefox и много добавляет к размеру файла svg, пока я загружаю шрифт в любом случае для использования на самой веб-странице (кажется, расточительно загружать шрифт дважды). Таким образом, внедрение глифов не является вариантом. То же самое касается встроенного data: uri.

Обновление:

Шрифт указан в файле svg следующим образом:

<defs>
    <style>
        @font-face {
            font-family: MDN;
            src: url("/font/MDN/MDN.ttf"); }
    </style>
</defs>

и я использую его следующим образом:

<text font-family="MDN" font-size="11"> <textPath ... > ... </textPath> </text>

Обновление 2:

Я попытался обойти проблему, указав шрифт в отдельной таблице стилей и включив его следующим образом:

<?xml-stylesheet type="text/css" href="/style/slyle.css" ?>

Но это похоже на ту же проблему: он работает, когда я открываю svg непосредственно в браузере (http://www.mywebsite/logo/logo-big-web.svg), но ломается, когда я использую svg в теге html img или в качестве фона для элемента html.

ОТВЕТЫ

Ответ 1

В соответствии с этим ответом на соответствующий вопрос встроенные svg-изображения должны быть автономными изображениями. Как упоминалось выше в комментариях, можно сделать svg "автономным", вложив в него все внешние активы. Поэтому в моем случае я должен был бы выполнить одно из следующих действий:

  • встроить шрифты, используя данные uri: src: url("data:application/font-woff;base64,<base64 encoded font here"),
  • вставлять шрифты в виде svg-глифов, которые я уже исключил из-за отсутствия поддержки firefox
  • превратить шрифты в пути в моем программном обеспечении для редактирования (например, развернуть путь в Adobe Illustrator).

Ни один из этих методов не казался удовлетворительным, так как мне очень хотелось, чтобы файлы svg были как можно более легкими.

Другим решением, чтобы обойти всю проблему, является использование тега html object вместо тега img. Таким образом, svg разрешено быть более чем автономным изображением и может использовать весь спектр методов включения xml для включения других активов. Это уже было указано в вышеупомянутом вопросе.

Я решил использовать метод object для встраивания svg. Я обновлю этот ответ, если выясню, что в этом есть что-то принципиально неправильное, вместо использования правильного элемента img.