Adobe Illustrator Exportoptionen

Dies ist weniger ein Snippet als vielmehr eine Erinnerung an etwas, das ich oft nachschlage. Beim Erstellen von SVG-Dateien in Adobe Illustrator gibt es verschiedene Methoden zum Exportieren der Dateien. Beide Methoden beinhalten eine Handvoll Optionen, von denen einige ich völlig vergessen habe, was sie bedeuten und welche ich auswählen soll.

Methode 1: Speichern unter…

Diese Methode werden Sie wahrscheinlich nicht zum Speichern von SVG für das Web verwenden. Dies dient hauptsächlich zum Speichern eines Master-Dokuments. Tatsächlich möchten Sie vielleicht direkt im Illustrator-Format speichern. Für den Export ins Web würden Sie einige der anderen Exportoptionen verwenden.

Der gebräuchlichste Weg, eine Datei als SVG in Adobe Illustrator zu speichern, ist die Auswahl der Option Datei > Speichern unter... im Hauptmenü.

Illustrator öffnet ein Dialogfeld, in dem Sie gefragt werden, wie die Datei heißen und wo sie gespeichert werden soll. Wichtiger noch, es wird auch gefragt, als welcher Dateityp gespeichert werden soll, in diesem Fall SVG. Nicht SVG komprimiert (svgz). Einfach nur SVG.

Klicken Sie auf die Schaltfläche Speichern, und ein weiterer Satz von Optionen wird angezeigt. Hier versagt meine Erinnerung oft und ich muss das Web nach Antworten durchsuchen. Hier ist ein Screenshot eines perfekt optimalen Weges, eine SVG-Datei in Adobe Illustrator zu speichern.

• SVG-Profile: Dies legt den XML-Dokumenttyp im öffnenden <svg>-Tag fest. SVG 1.1 ist die neueste Version, bietet die breiteste Unterstützung und ist wahrscheinlich die am besten geeignete Option. Alles andere ist entweder eine ältere Version oder eine Untermenge von SVG 1.1 und ich bin bisher noch nie auf ein Problem gestoßen, wenn ich sie ausgewählt habe.
• Schriften > Zeichensatz: Wenn Sie "In Pfade konvertieren" auswählen, werden alle in der Datei eingegebenen Texte als Vektorpfade anstelle von Glyphen exportiert. Glyphen haben die Chance, nicht gerendert zu werden, aber Vektorpfade sind immer ein großes Plus.
• Optionen > Bildstandort: Wenn Rasterbilder (also JPG, PNG, GIF) in der Datei verwendet werden, dann wählen wir die Option "Verknüpfen". Andernfalls wird das Rasterbild in die Datei eingebettet, was die Leistungsvorteile von SVG zunichte macht, indem die Dateigröße erhöht wird, um diese zusätzlichen Assets aufzunehmen. Besser ist es, sie als Links zu referenzieren und sicherzustellen, dass diese Quelldateien im selben Verzeichnis wie die SVG-Datei enthalten sind.
• Optionen > Bildstandort > Illustrator-Bearbeitungsfunktionen beibehalten: Dies hat einen massiven Einfluss auf die Ausgabe der SVG-Datei. Da Sie hier wahrscheinlich eine "Master"-Kopie speichern, die nicht für das Web bestimmt ist, würden Sie diese aktiviert lassen. Dadurch bleiben Illustrator-spezifische Elemente (wie Hilfslinien) für die nächste Öffnung der Datei erhalten. Deaktiviert bedeutet, dass Dinge wie diese entfernt und verloren gehen.
• Erweiterte Optionen > CSS-Eigenschaften: Ich wähle hier "Präsentationsattribute", da diese Eigenschaften (z. B. Füllungen, Konturen usw.) auf der niedrigsten Ebene der Spezifität platziert. Zum Beispiel <path stroke="black" stroke-width="2" ... />. Dies stylt das Element, ist aber in CSS sehr einfach zu überschreiben.
• Erweiterte Optionen > Dezimalstellen: Wenn Sie den Code für ein <path> durchgesehen haben, wissen Sie, dass die Werte, die diese Formen angeben, sehr präzise sein können. Oft sind diese jedoch zu präzise und erhöhen die Gesamtgröße der SVG-Datei. Da Sie hier wahrscheinlich eine Master-Datei speichern, können Sie diese relativ hoch halten, da die Dateigröße keine große Rolle spielt.
• Erweiterte Optionen > Kodierung: Ich bin kein Experte für UTF-Kodierung, aber wenn Sie diese auf "Unicode UTF-8" belassen, stellen Sie die Abwärtskompatibilität sicher. Außerdem sind UTF-8-Dateien tendenziell kleiner als UTF-16, was an sich schon ein Vorteil ist.
• Erweiterte Optionen > Responsiv: Wenn Sie diese deaktivieren, werden feste height und width Attribute im SVG gesetzt. Ich aktiviere diese Option, da sie es mir ermöglicht, diese Attribute entweder im Code oder in der CSS festzulegen.

Methode 2: Exportieren als

Eine weitere Möglichkeit, SVG aus Adobe Illustrator zu erhalten, ist die Auswahl der Option Datei > Exportieren > Exportieren als... im Hauptmenü. Es gibt jedoch einen zweiten Weg dorthin, indem Sie das Bedienfeld "Aktionen" im Illustrator-Arbeitsbereich verwenden.

Diese Option ist ideal, wenn Sie wissen, dass Sie diese Datei direkt im Web verwenden werden und nicht vorhaben, das Design später zu bearbeiten. Sie bietet deutlich weniger Einstellungen und einige Optionen, mit denen die Datei für eine bessere Leistung weiter optimiert werden kann. Tatsächlich ist es am besten, dies mit einer Kopie der Datei zu tun und nicht mit der Master-Datei selbst, sodass eine Version zum späteren Öffnen und Bearbeiten in Illustrator vorhanden ist und eine weitere, die besser für die Bereitstellung auf einer Produktionswebsite geeignet ist.

• Styling: Wir haben dies bereits in den Einstellungen von Methode 1 behandelt, aber ich wähle hier "Präsentationsattribute", da dies eine Möglichkeit ist, Eigenschaften auf den Attributen der höchsten Ebene zu organisieren. Dies bringt Ordnung in den Markup, Flexibilität in unserer Fähigkeit, die nachfolgenden Attribute mit CSS zu stylen, und führt oft zu kleineren Dateigrößen.
• Schriftart: Dies ist eine weitere Option, die wir oben behandelt haben. Wenn Sie "In Pfade konvertieren" wählen, werden Glyphen für Textzeichen durch Vektorpfade ersetzt, was sicherstellt, dass Text korrekt gerendert wird.
• Bilder: Dies ist eine weitere Option, die wir oben behandelt haben. Wenn Sie "Verknüpfen" wählen, werden eingebettete Rasterbilder nicht in das SVG gepackt, was die Datei erheblich kleiner macht.
• Objekt-IDs: Diese Einstellung gibt Illustrator Anweisungen, wie IDs im Markup benannt werden sollen. Sie können angeben, dass IDs basierend auf den Ebenennamen in der Datei benannt werden.
• Dezimal: Weniger Dezimalstellen im Code bedeuten kleinere Dateigrößen. Die Einstellung auf 1 ist ideal und in vielen Fällen in Ordnung und hat keinen spürbaren Unterschied im Design, aber 2 ist typischerweise sicher. In jedem Fall lohnt es sich zu prüfen, wie das SVG gerendert wird.
• Minimieren: Ja, bitte! Dies komprimiert den Code, um Leerzeichen zu reduzieren und die Web-Performance zu verbessern, ähnlich wie das Minifizieren von CSS.
• Responsiv: Genau wie bei der ersten Methode ist die Auswahl dieser Option ideal, da andernfalls feste height und width Attribute auf dem SVG platziert würden.