it-swarm.com.de

Optimale Einstellungen für den Export von SVGs für das Web aus Illustrator?

Ich möchte ein SVG-Logo für eine Website verwenden, damit es auf einem ansprechenden Design für alle Geräte gut aussieht.

Aber da es gibt Probleme , möchte ich so viele Geräte und Browser wie möglich unterstützen. Die Ladegeschwindigkeit ist ebenfalls ein wichtiger Gesichtspunkt. Wie passen Exporteinstellungen in Adobe Illustrator in all das?

In Illustrator gibt es mehrere Optionen für den SVG-Export. Erstens welches SVG-Profil ist am besten?

enter image description here

Ich nehme an, SVG Tiny hat eine geringere Dateigröße? Unterstützen viele Geräte SVG Tiny? Was sind die wichtigsten Unterschiede? (Ohne lesen zu müssen dieses W3-Monster .)

Zweitens gehe ich davon aus, dass die beste Option für die Bildposition "Link" ist. (Siehe Beschreibung nach dem Ausrufezeichen.)

enter image description here

Wie unterstützt der Browser alternativ die Option "Einbetten"?

enter image description here

Vielen Dank!

P.S. Es wird eine Fallback-Alpha-PNG-Option geben, aber ich möchte, dass das SVG so gut wie möglich unterstützt wird. (Denken Sie mal darüber nach, eine Fallback-Option - wie ein JPG - wäre in diesem Fall wahrscheinlich am besten geeignet, da Alpha-PNG selbst eine Lösung für ältere IE benötigt.)

Update: Es können auch weitere Optionen konfiguriert werden. Ich arbeite nicht mit Text, daher sehe ich nur die Nachkommastellen. Ist für Logos eine Einstellung von maximal 200 x 200 Pixel (also 400 x 400 Pixel auf Retina-Displays) am besten "3"? Oder "2", um die Dateigröße zu minimieren?

enter image description here

126
Baumr

SVG-Profile

  • SVG 1.0: Alle modernen Desktop- und mobilen Browser unterstützen SVG 1.1. Wählen Sie diese Option also niemals.
  • SVG 1.1: Das werden Sie fast immer wollen.
  • SVG Tiny/Basic: Dies ist eine Teilmenge von SVG für mobile Geräte. Nur eine Handvoll Geräte unterstützen SVG Tiny und nicht die vollständige Spezifikation. Entscheiden Sie sich für SVG 1.1.

Hinweis: SVG Tiny reduziert die Dateigröße nicht, sondern ist nur eine Teilmenge von SVG, die für Geräte mit geringer Prozessorleistung geeignet ist. Farbverläufe, Deckkraft, eingebettete Schriftarten und Filter werden verworfen. Erik Dahlström sagt: Alle SVG 1.1-Vollbetrachter sollten in der Lage sein, den gesamten SVG 1.1 Tiny/Basic-Inhalt (gemäß Spezifikation) und wahrscheinlich auch den gesamten SVG 1.2 Tiny-Inhalt anzuzeigen, den Illustrator erstellt.

Schriftarten Hinweis: Wenn Sie keinen Text in Ihrem Bild haben, spielt diese Einstellung keine Rolle.

  • Adobe CEF: Verwenden Sie diese Option niemals, um sie in Browsern anzuzeigen. So kann Adobe Schriften in SVG-Dateien einbetten, soweit ich weiß, wird dies nur vom SVG-Viewer-Plugin von Adobe unterstützt.

  • SVG: Hiermit wird die Schriftart als SVG eingebettet, was von Firefox nicht unterstützt wird. Dies ist jedoch eine gute Option, wenn Sie nur mobile Geräte unterstützen möchten (auf denen normalerweise Webkit ausgeführt wird).

  • Umrisse erstellen: Sie werden dies die meiste Zeit tun wollen , es sei denn, Sie haben eine große Menge an Text. Wenn Sie eine große Textmenge haben, möchten Sie die Schrift mit WOFF einbetten, müssen dies jedoch von Hand tun.

Teilmenge :

  • Keine: Hiermit wird die vorherige Einstellung annulliert, und es wird keine Schriftart eingebettet, wenn Sie sich nicht darum kümmern, dass die Schriftart auf eine andere Schriftart auf dem Computer des Benutzers zurückgreift. Wählen Sie diese Option.

  • Nur verwendete Glyphen: Sie möchten dies die meiste Zeit , wenn Sie die Schriftart einbetten möchten. Es werden nur die verwendeten Zeichen eingebettet, um die Dateigröße nicht zu erhöhen.

  • [Rest der Untergruppe]: Dies ist ziemlich klar. Sie können wählen, ob Sie die gesamte Schriftart oder Untergruppen davon einbeziehen möchten. Dies ist nur nützlich, wenn Ihre SVG-Datei dynamisch ist und sich der Text möglicherweise aufgrund von Benutzereingaben ändert.

Bilder : Dies ist nur wichtig, wenn Sie Bitmap-Bilder einschließen

  • Einbetten: Dies ist normalerweise das, was Sie wollen , es codiert das Bild als Daten-URI, so dass Sie nur eine Datei anstelle der SVG-Datei mit ihrem Begleiter hochladen Bitmap-Bilder.

  • Link: Verwenden Sie diese Option nur, wenn Sie mehrere SVG-Dateien haben, die auf eine Bitmap-Datei verweisen (sie wird also nicht bei jedem Rendern der SVG-Datei heruntergeladen).

Beachten Sie, dass verknüpfte Bitmap-Bilder nicht angezeigt werden, wenn die SVG-Datei über das Tag <img> Angezeigt wird, da img das Laden externer Ressourcen nicht zulässt. Außerdem: Das Webkit hat einen Fehler, bei dem Bitmap-Bilder in SVG-Dateien nicht angezeigt werden, selbst wenn Sie sie einbetten. Kurz gesagt: Verwenden Sie ein einfaches <svg> - Tag, wenn Sie Bitmap-Bilder einbetten oder verknüpfen möchten. Verwenden Sie nicht <img>.

Illustrator-Bearbeitungsfunktionen beibehalten

Ich bevorzuge es, eine .ai-Datei als mein Quellbild zu speichern und die SVG-Datei als eine Funktion Export for web Zu betrachten. Auf diese Weise konzentrieren Sie sich auf die Reduzierung der Dateigröße und erhalten eine makellose Kopie Ihrer Vektordatei mit allen Bearbeitungsfunktionen. Also wähle das nicht.

Nachkommastellen

Die Standardeinstellung 3 Ist eine vernünftige Einstellung, die Sie größtenteils vergessen können.

Wenn Sie jedoch sehr komplizierte Pfade mit vielen Punkten haben und diese Einstellung auf 1 oder sogar 0 verringern, wird die Dateigröße erheblich reduziert. Sie müssen jedoch vorsichtig sein, da Beziersegmente sehr empfindlich auf diese Einstellung reagieren und möglicherweise ein wenig verzerrt wirken. Wenn Sie diese Einstellung verringern, stellen Sie sicher, dass sie in einem Browser akzeptabel aussieht.

Codierung

Die Erklärung hinter der Zeichenkodierung ist eher technisch und betrifft nur SVG-Dateien mit Text. Die wahrscheinlichste Codierung, die Sie benötigen, ist UTF-8 . Ändern Sie dies nur, wenn Sie wissen, was Sie tun.

Für Adobe SVG Viewer optimieren

Adobe SVG Viewer ist ein Browser-Plugin aus Zeiten, in denen Browser SVG nicht von Haus aus unterstützten. Ich weiß nicht, was es tut, aber es ist irrelevant, überprüfen Sie dies nicht .

Slicing-Daten einschließen

Dies fügt Ihrer SVG-Datei aufgeblähte Metadaten hinzu, es sei denn, Sie planen, Ihre SVG-Datei später in Illustrator zu öffnen und Ihre Slices zu finden (falls vorhanden). Aktivieren Sie diese Option nicht

XMP einschließen

Weitere Metadaten zur Datei können Sie hier auf XMP nachlesen . nicht überprüfen

Ausgabe weniger <tspan> Elemente

Dies ist ausgegraut, wenn Sie keinen Text haben. SVG unterstützt keine Kerning-Tabellen, daher scheinen bestimmte Zeichenfolgen zu weit auseinander zu liegen, d. H. AVA. Illustrator fügt tspan Elemente hinzu und ändert die Zeichenpositionen ein wenig. Dadurch wird die Datei etwas aufgebläht . Aktivieren Sie dies nur, wenn Sie mehr Wert auf die Dateigröße als auf die Textdarstellung legen .

Verwenden Sie das Element <textpath> Für Text in einem Pfad

Dies ist ausgegraut, wenn sich kein Text auf einem Pfad befindet. Da die Browser beim Platzieren von Text auf einem Pfad in der Regel sehr unterschiedlich sind, versucht Illustrator, die Drehung und Position auf den Charakter anzuwenden, anstatt den Auftrag dem Browser zu überlassen. Aktivieren Sie dieses Kontrollkästchen nur, wenn Sie mehr Wert auf die Dateigröße als auf die Textdarstellung legen .


Im Allgemeinen empfehle ich Ihnen, sich mit SVG im Allgemeinen zu befassen. Sie werden feststellen, dass es HTML sehr ähnlich ist und Sie Dinge optimieren können, die in Illustrator nicht möglich sind.

212
methodofaction