Векторная инфографика. Почему в веб-браузере она отображается иначе?

Я сделал инфографику в Adobe Illustrator и сохранил ее в виде .svgфайла. Но затем , когда я попытался открыть его в браузере Google Chrome, некоторые шрифты и некоторые шрифты, выделенные курсивом, даже не были выделены курсивом. Почему это происходит и какое решение?

Это было 600*1100 pixelsпотому, что я где-то читал, что это хороший размер для начала.

На самом деле получилось очень некрасиво!

Шрифты не встраиваются в SVG автоматически. Прочтите этот вопрос для получения дополнительной информации: graphicdesign.stackexchange.com/questions/5162/…
Мне не нужно ничего делать с сетью, мне просто нечем было открыть SVG, поэтому я использовал веб-браузер. Есть ли какое-либо решение, кроме этого, потому что я не понимаю этот язык.
Какова ваша конечная цель с SVG? Это для печати?
Это в основном для печати.

Ответы (2)

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

Самый простой способ сделать это:

  1. Выделить весь текст
  2. Перейти к Object>>Expand
  3. Нажмите «хорошо»
  4. Пересохраните SVG.

введите описание изображения здесь

Это хорошо работает для печати, но обратите внимание, что для Интернета вы, скорее всего, не захотите преобразовывать тип (по причинам доступности и SEO).
OP выше заявил, что это для печати.

Я бы сохранил резервную копию с активными шрифтами, а затем сохранил другую версию со шрифтами, преобразованными в контур, сохраненный в формате .svg для использования в Интернете.