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.

Da es jedoch Probleme gibt , 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?

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

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

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

Danke dir!

PS Es wird eine Fallback-Alpha-PNG-Option geben, aber ich möchte, dass die SVG-Datei so gut wie möglich unterstützt wird. (Wenn Sie sich das vorstellen, ist eine Fallback-Option - wie ein JPG - in diesem Fall wahrscheinlich am besten geeignet, da Alpha-PNG selbst eine Lösung für ältere IE benötigt.)

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

SVG-Profile

• SVG 1.0: Alle modernen Desktop- und mobilen Browser unterstützen SVG 1.1. Wählen Sie diese Option daher 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 daher 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 Verarbeitungsleistung 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 produziert.

Hinweis zu Schriftarten : Wenn Ihr Bild keinen Text enthält, spielt diese Einstellung keine Rolle.

• Adobe CEF: Verwenden Sie diese Option niemals, um sie in Browsern anzuzeigen. Auf diese Weise kann Adobe Schriftarten 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).

• Konturen erstellen: Sie möchten dies die meiste Zeit tun , es sei denn, Sie haben eine große Textmenge. Wenn Sie viel Text haben, möchten Sie die Schriftart mit WOFF einbetten, müssen dies jedoch von Hand tun.

Teilmenge :

• Keine: Dadurch wird die vorherige Einstellung negiert und 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.

• Es werden nur Glyphen verwendet: Sie möchten dies die meiste Zeit, wenn Sie die Schriftart einbetten möchten . Es werden nur die verwendeten Zeichen eingebettet, damit Ihre Dateigröße nicht erhöht wird.

• [Rest der Teilmenge]: Dies ist ziemlich klar. Sie können wählen, ob Sie die gesamte Schriftart oder Teilmengen davon einschließen möchten. Dies ist nur nützlich, wenn Ihre SVG-Datei dynamisch ist und sich der Text aufgrund von Benutzereingaben ändern kann.

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

• Einbetten: Dies ist normalerweise das, was Sie möchten . Es codiert das Bild als Daten-Uri, sodass Sie nur eine Datei anstelle der SVG-Datei mit den dazugehörigen Bitmap-Bildern hochladen.

• Link: Verwenden Sie diese Option nur, wenn Sie mehrere SVG-Dateien haben, die auf eine Bitmap-Datei verweisen (daher wird sie nicht jedes Mal heruntergeladen, wenn die SVG-Datei gerendert wird).

Beachten Sie, dass verknüpfte Bitmap-Bilder nicht angezeigt werden, wenn die SVG-Datei über das <img>Tag angezeigt wird , da imgdas Laden externer Ressourcen nicht möglich ist. Außerdem: Webkit hat einen Fehler, der keine Bitmap-Bilder in SVG-Dateien anzeigt, selbst wenn Sie sie einbetten. Kurz gesagt: Verwenden Sie ein einfaches <svg>Tag, wenn Sie Bitmap-Bilder einbetten oder verknüpfen möchten <img>. Verwenden Sie es nicht .

Behalten Sie die Bearbeitungsfunktionen von Illustrator bei

Ich bevorzuge es, eine .ai-Datei als Quellbild zu speichern und die SVG-Datei als Export for webFeature 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 3ist eine vernünftige Einstellung, die Sie meistens vergessen können.

Wenn Sie jedoch einen wirklich komplizierten Pfad mit vielen Punkten haben, die diese Einstellung auf 1 oder sogar 0 senken, wird die Dateigröße erheblich reduziert. Sie müssen jedoch vorsichtig sein, da Bezier-Segmente sehr empfindlich auf diese Einstellung reagieren und möglicherweise etwas verzerrt wirken. Wenn Sie diese Einstellung verringern, stellen Sie immer sicher, dass sie in einem Browser akzeptabel aussieht.

Codierung

Die Erklärung für die 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.

Optimieren Sie für Adobe SVG Viewer

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

Schneiden Sie Daten ein

Dies fügt Ihrer SVG-Datei aufgeblähte Metadaten hinzu, es sei denn, Sie möchten Ihre SVG-Datei später in Illustrator öffnen und Ihre Slices finden (falls vorhanden). Überprüfen Sie dies nicht

XMP einschließen

Weitere Metadaten zur Datei finden Sie hier auf XMP . Überprüfen Sie dies nicht

Weniger <tspan>Elemente ausgeben

Dies wird ausgegraut, wenn Sie keinen Text haben. SVG unterstützt keine Kerning-Tabellen, daher scheinen bestimmte Zeichenfolgen zu weit voneinander entfernt zu sein, d AVA. H. Illustrator arbeitet herum, indem es tspanElemente hinzufügt und die Zeichenpositionen ein wenig ändert. Dies fügt der Datei ein wenig Aufblähung hinzu. Überprüfen Sie dies nur, wenn Sie mehr Wert auf die Dateigröße als auf das Erscheinungsbild des Texts legen .

Verwenden Sie ein <textpath>Element für Text in einem Pfad

Dies wird abgeblendet, wenn Sie keinen Text auf einem Pfad haben. Browser sind in der Regel sehr unterschiedlich, wenn es darum geht, Text auf einem Pfad zu platzieren. Daher versucht Illustrator, hilfreich zu sein, indem die Drehung und Position auf das Zeichen angewendet werden, anstatt den Job dem Browser zu überlassen. Überprüfen Sie dies nur, wenn Sie sich mehr für die Dateigröße als für das Erscheinungsbild des Textes interessieren .

Im Allgemeinen würde ich Ihnen empfehlen, sich mit SVG im Allgemeinen zu befassen. Sie werden feststellen, dass es HTML sehr ähnlich sieht und es Ihnen ermöglicht, Dinge zu optimieren, die in Illustrator nicht möglich sind.