Альтернативное семейство шрифтов для текста в SVG-файле

Контекст

Среда

SVG-файл в Inkscape 0.92.3 на Windows 10 Pro x64

Проблема

Веб-браузеры не отображают текст «Ушел домой».

Описание

Я создал SVG-файл в Inkscape, содержащий текст с использованием шрифта Elephant. К сожалению, веб-браузеры [1] , предназначенные для отображения изображения, вообще не отображают текст. Я предполагаю, что в браузерах не установлен правильный шрифт? [2]

Та же проблема иногда возникает, когда я работаю с CSS для веб-сайтов. Решением в таких случаях является использование альтернативных шрифтов, которые могут использовать браузеры, как показано ниже.

font-family: Elephant, Arial, Helvetica, sans-serif;

Вопросов

  1. Можно ли указать альтернативные шрифты в SVG-файле для использования приложениями при рендеринге текста? [3]
  2. Если да, то как это делается в Inkscape 0.92.3?

Используемое решение

В исходном SVG-файле <flowRoot>вместо обычного текста ( ) использовался плавный текст ( <text>).

В Inkscape выделите текст и используйте « Текст» > «Преобразовать в текст» .

Ноты

  1. Я тестировал с Chrome, Firefox и Internet Explorer.
  2. Несмотря на то, что шрифт установлен в Windows.
  3. Это означает, что приложение будет использовать второй шрифт, если у него нет первого, и так далее.
Было бы лучше преобразовать текст в пути: «Путь > Объект в путь». Если бы мне абсолютно необходимо было сохранить текст как текст, я мог бы удалить его из svg, вставить в соседний div и наложить поверх изображения svg. Вот так: jsfiddle.net/9kjaorp6/1
Добро пожаловать на GD.SE, Бьорн. Как пишет @Moini, проблемы связаны с перетекающим текстом, а не со шрифтом Elephant (который обычно входит в системы Windows) или альтернативным шрифтом. Я пробовал удалить вытекший текст и поставить обычное текстовое поле, а текст рендерится браузером.
Немного мелочей: проблема с плавным текстом исчезнет в Inkscape версии 1.0, над ней уже работают. Затем появится новый вид потокового текста и запасной вариант для тех зрителей, которые его не реализуют.

Ответы (2)

Проблема в том, что вы используете плавный текст в своем файле. Перетекающий текст не входит в стандарт SVG (он был запланирован, реализован в Inkscape, затем исключен из стандарта и сохранен в Inkscape из-за его полезности).

Используйте «Путь > Объект в путь» или «Текст > Преобразовать в текст» (если вам нужно сохранить текст как текст)

Спасибо за ваш вклад. «Конвертировать в текст» был очень полезен! К сожалению, я не могу проголосовать за ваш ответ из-за моей низкой репутации на этом StackExchange.

Это либо не рендеринг, потому что этот шрифт не установлен на других компьютерах, на которых просматривается SVG, либо, возможно, проблема с самим файлом шрифта, либо какая-то несовместимость с Inkscape. Я не думаю, что это как-то связано с браузером как таковым. У браузеров нет «шрифтов» — они могут использовать системные шрифты и веб-шрифты. В конечном счете, я не могу точно ответить на эту часть вашего вопроса, так как у меня нет шрифта, чтобы проверить его, и шрифт не является бесплатным . Я не покупаюсь, чтобы узнать.

В любом случае, исправить это достаточно просто — и действительно, это то, что вы, вероятно, должны делать с каждым SVG, созданным для Интернета, независимо от используемого шрифта, чтобы избежать проблем с отсутствующим шрифтом.

  1. Выберите все текстовые поля в документе Inkscape.
  2. щелкните Путь > Объект к пути . Это превратит весь текст в контуры
  3. Сохранить * SVG

Теперь весь текст будет правильно отображаться на каждом компьютере, независимо от того, какие шрифты установлены.

*Примечание. При сохранении SVG для использования на веб-странице убедитесь, что вы не перезаписываете исходную иллюстрацию (которую вы уже должны были сохранить). Выберите, чтобы сохранить его с другим именем файла. После того, как текст будет преобразован в контуры, он станет необратимым, и вам нужно будет снова напечатать текст, если вы хотите его отредактировать.

Спасибо за ваш вклад. Информация о том, как сделать текст безопасным для Интернета путем преобразования его в пути, была очень полезной! К сожалению, я не могу проголосовать за ваш ответ из-за моей низкой репутации на этом StackExchange.
Альтернативное семейство шрифтов для текста в SVG-файле
СпросиСетьПолитика конфиденциальности1y, 0v