Exportoptionen für Adobe Illustrator - CSS-Tricks

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

Methode 1: Speichern unter…

Sie würden diese Methode wahrscheinlich nicht verwenden, um SVG für die Verwendung im Web zu speichern. Dies dient hauptsächlich zum Speichern eines Stammdokuments. Möglicherweise möchten Sie sogar direkt im Illustrator-Format speichern. Sie würden einige der anderen Exportoptionen verwenden, um für das Web zu exportieren.

Die häufigste Methode zum Speichern einer Datei als SVG in Adobe Illustrator ist die Auswahl der File > Save As… Option aus dem Hauptmenü.

Illustrator öffnet ein Dialogfenster, in dem Sie gefragt werden, wie die Datei benannt und wo sie gespeichert werden soll. Noch wichtiger ist, dass auch gefragt wird, welcher Dateityp als welcher gespeichert werden soll, in diesem Fall SVG. Nicht SVG-komprimiert (svgz). Einfache alte SVG.

Klicken Sie auf die Schaltfläche Speichern. Weitere Optionen werden angezeigt. Hier versagt mir mein Gedächtnis und ich muss das Web nach Antworten durchsuchen. Hier ist ein Screenshot einer perfekt optimalen Methode zum Speichern einer SVG-Datei in Adobe Illustrator.

• SVG-Profile : Hiermit wird der XML-Dokumenttyp für das öffnende Tag festgelegt. SVG 1.1 ist die neueste Version, bietet die umfassendste Unterstützung und ist wahrscheinlich die am besten geeignete Option. Alles andere ist entweder eine ältere Version oder eine Teilmenge von SVG 1.1, und ich muss bei der Auswahl noch auf ein Problem stoßen.
• Schriftarten> Typ : Wenn Sie „In Gliederung konvertieren“ auswählen, wird sichergestellt, dass der eingegebene Text in der Datei eher Vektorpfade als Glyphen sind. Glyphen haben die Möglichkeit, nicht gerendert zu werden, aber Vektorpfade sind immer ein großer Daumen hoch.
• Optionen> Bildspeicherort : Wenn in der Datei Rasterbilder (gelesen: JPG.webp, PNG, GIF) verwendet werden, möchten wir die Option „Verknüpfen“ auswählen. Andernfalls wird das Rasterbild in die Datei eingebettet, wodurch die Leistungsvorteile direkt aus der SVG-Datei herausgenommen werden, indem die Dateigröße erhöht wird, um diese zusätzlichen Assets einzuschließen. Verweisen Sie sie besser als Links und stellen Sie sicher, dass diese Quelldateien im selben Verzeichnis wie die SVG-Datei enthalten sind.
• Optionen> Bildspeicherort> Illustrator-Bearbeitungsfunktionen beibehalten : Diese hat einen massiven Einfluss auf die Ausgabe der SVG-Datei. Da Sie hier wahrscheinlich eine "Master" -Kopie speichern, die nicht für uns im Internet bestimmt ist, lassen Sie dies aktiviert. Dadurch bleiben Illustrator-geschützte Elemente (z. B. Handbücher) beim nächsten Öffnen der Datei erhalten. Wenn diese Option nicht aktiviert ist, werden solche Dinge entfernt und gehen verloren.
• Erweiterte Optionen> CSS-Eigenschaften : Ich wähle für diese Option "Präsentationsattribute" aus, da dadurch Eigenschaften (z. B. Füllungen, Striche usw.) auf der niedrigsten Spezifitätsstufe platziert werden. Zum Beispiel . Dies formatiert das Element, ist jedoch in CSS sehr einfach zu überschreiben.
• Erweiterte Optionen> Dezimalstellen : Wenn Sie den Code nach a durchsucht haben , wissen Sie, dass die Werte, die diese Formen angeben, sehr präzise sein können. Oft sind diese jedoch zu präzise und tragen zur Gesamtgröße der SVG-Datei bei. 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> Codierung : Ich bin kein Fan der UTF-Codierung, aber wenn Sie dies bei „Unicode UTF-8“ belassen, wird die Abwärtskompatibilität sichergestellt. Außerdem sind UTF-8-Dateien in der Regel kleiner als UTF-16, sodass dies ein Gewinn für sich ist.
• Erweiterte Optionen> Reaktionsschnell : Wenn Sie dieses Kontrollkästchen nicht aktivieren, werden feste heightund widthAttribute in der SVG festgelegt. Ich aktiviere diese Option, weil ich diese Attribute entweder im Code oder im CSS festlegen kann.

Methode 2: Exportieren als

Eine andere Möglichkeit, SVG aus Adobe Illustrator zu erhalten, besteht darin, die File > Export > Export As… Option aus dem Hauptmenü auszuwählen . Es gibt jedoch eine zweite Möglichkeit, mithilfe des Bedienfelds „Aktionen“ im Illustrator-Arbeitsbereich dorthin zu gelangen.

Diese Option ist ideal, wenn Sie wissen, dass Sie diese Datei direkt im Web verwenden und später nicht am Design basteln möchten. Es bietet viel weniger Einstellungen und einige Optionen, mit denen die Datei die Datei für eine bessere Leistung weiter optimieren kann. Tatsächlich empfiehlt es sich, dies auf einer Kopie der Datei und nicht auf der Masterdatei selbst zu tun, damit eine Version später in Illustrator geöffnet und bearbeitet werden kann und eine andere, die besser für die Bereitstellung auf einer Produktionswebsite geeignet ist.

• Styling : Wir haben dies bereits in den Einstellungen für Methode 1 behandelt, aber ich wähle hier "Präsentationsattribute", da dies eine Möglichkeit ist, Eigenschaften auf Attributen der höchsten Ebene zu organisieren. Dies erhöht die Ordnung des Markups, die Flexibilität bei der Gestaltung der nachfolgenden Attribute mit CSS und führt häufig zu kleineren Dateigrößen.
• Schriftart : Dies ist eine andere, die wir oben behandelt haben. Wenn Sie jedoch „In Umrisse konvertieren“ wählen, werden Glyphen gegen Vektorpfade für Zeichen ausgetauscht, um sicherzustellen, dass der Text korrekt wiedergegeben wird.
• Bilder : Dies ist eine weitere, die wir oben behandelt haben. Wenn Sie jedoch „Link“ auswählen, wird verhindert, dass eingebettete Rasterbilder in die SVG-Datei gepackt werden, wodurch die Datei viel größer wird.
• Objekt-IDs : Diese Einstellung gibt Illustrator Marschbefehle zum Benennen von IDs im Markup. Sie können festlegen, dass IDs basierend auf der Benennung der Ebenen in der Datei benannt werden sollen.
• Dezimal : Weniger Dezimalstellen im Code bedeuten kleinere Dateigrößen. Das Einstellen auf 1ist in vielen Fällen ideal und in Ordnung und hat keinen merklichen Unterschied im Design, ist aber 2normalerweise sicher. In jedem Fall lohnt es sich zu überprüfen, wie die SVG gerendert wird.
• Minimieren : Ja, bitte! Dadurch wird der Code reduziert, um Leerzeichen zu reduzieren und die Webleistung zu steigern, ähnlich wie beim Minimieren von CSS.
• Reaktionsschnell : Genau wie bei der ersten Methode ist die Auswahl dieser Option ideal, da ansonsten feste heightund widthAttribute in der SVG platziert würden.