Vektor-Infografik - Warum wird sie im Webbrowser anders dargestellt?

Ich habe eine Infografik in Adobe Illustrator erstellt und als .svgDatei gespeichert. Aber als ich dann versuchte, es im Google Chrome-Browser zu öffnen, waren einige der Schriftarten und einige kursive Schriftarten nicht einmal kursiv. Warum passiert das und was ist die Lösung?

Es war 600*1100 pixels, weil ich irgendwo gelesen hatte, dass es eine gute Größe für den Anfang ist.

Es stellte sich heraus, dass es ziemlich hässlich war!

Schriftarten werden nicht automatisch in ein SVG eingebettet. Lesen Sie diese Frage für weitere Informationen: graphicdesign.stackexchange.com/questions/5162/…
Ich muss nichts mit dem Web machen, ich hatte einfach nichts anderes, um das SVG zu öffnen, also habe ich den Webbrowser verwendet. Gibt es eine andere Lösung als dieses Zeug, weil ich diese Sprache nicht verstehe.
Was ist Ihr Endziel mit dem SVG? Ist das für den Druck?
Es ist im Grunde für den Druck.

Antworten (2)

Der beste Weg, dies zu umgehen, besteht darin, Ihre Schriftarten/andere Assets in Ihrem SVG zu erweitern, die beim Öffnen im Browser nicht richtig gerendert werden. Das bedeutet, dass Sie Ihre Textbereiche hervorheben und in Illustrator-Pfade umwandeln müssen, anstatt sie als auswählbaren Text zu belassen.

Der einfachste Weg, dies zu tun, ist:

  1. Wählen Sie Ihren gesamten Text aus
  2. Gehen Sie zu Object>>Expand
  3. Klicken Sie auf "Okay".
  4. Speichern Sie Ihr SVG erneut.

Geben Sie hier die Bildbeschreibung ein

Dies funktioniert gut für den Druck, aber beachten Sie, dass Sie für das Web wahrscheinlich keine Schrift konvertieren möchten (aus Gründen der Barrierefreiheit und aus SEO-Gründen).
OP oben hat angegeben, dass es für den Druck bestimmt ist.

Ich würde eine Sicherungskopie mit aktiven Schriftarten speichern und dann eine andere Version mit in Gliederung konvertierten Schriftarten speichern, die im .svg-Format zur Verwendung im Internet gespeichert werden.