Ich habe gerade Illustrator bekommen und mich mit dem Programm vertraut gemacht. Gibt es bestimmte Exporteinstellungen, die ich beachten muss, um als .SVG-Datei zu exportieren? Es scheint mehrere Einstellungen zu geben, dh Styling, Schriftart usw. Wäre es möglich, Erklärungen für jede Option und ihre Funktion bereitzustellen?
SVG ist ausschließlich ein Textformat, das zur Darstellung von Bildern verwendet wird. Je nachdem, wie Sie die Exporteinstellungen ändern, wird der Text formatiert. In den meisten Fällen funktionieren sie in modernen Browsern alle. Wenn Sie es jedoch für ein bestimmtes Programm auf eine bestimmte Weise formatieren müssen, sind diese Einstellungen dafür da. Ein SVG wird so eingerichtet, dass XML-Tags verwendet werden. Ein Header deklariert es als SVG-Datei, gefolgt von einem svg-Tag und endet mit einem /svg-Tag, sehr ähnlich zu HTML.
Tatsächlich können Sie direkt in HTML-Dateien verwenden und über Javascript damit interagieren, als ob es Teil des DOM wäre, obwohl Sie mit verschiedenen Browsern unterschiedliche Kilometer erzielen werden.
Internes CSS: Ähnlich wie ein HTML-CSS kann das SVG die Farben, Strichstärke, Farbverläufe usw. an einer Stelle am Anfang der Datei speichern. Dies ist die einfachste Methode, mit der Sie später arbeiten können, wenn Sie Farben außerhalb von Illustrator optimieren möchten. Internes CSS verwendet Klassen, um jedem der Pfade den richtigen Stil zu geben.
Inline-CSS: Immer noch CSS verwendend, bettet dies den Stil mithilfe eines Stilattributs in jedes Pfadelement selbst ein. Dadurch wird der Stil jedes Pfads mit seinem Pfad kombiniert, was je nach Komplexität Ihrer Grafik zu größeren Dateigrößen führen kann.
(z. B.: Pfadstil = "Strichbreite: 8; Strich: Blau;" ...)
Präsentationsattribute: Verzichtet auf CSS und bettet jede Information in einen eigenen Pfad ein, ähnlich wie Inline-CSS, verwendet aber stattdessen die eingebauten Attribute jedes Elements. Dies dient hauptsächlich der Legacy-Unterstützung, da CSS die bevorzugte Methode ist. Dies kann auch zu größeren Dateigrößen führen.
(Beispiel: Pfad Strichbreite = "7" Strich = "#FF00FF" ...)
SVG: Typdaten werden als Klartext gespeichert und dann vom Browser mit der angegebenen Schriftart neu erstellt, obwohl diese möglicherweise nicht perfekt neu erstellt werden, wenn sie auf einem anderen Computer angezeigt werden, der diese Schriftart nicht hat. Dadurch bleibt die Bearbeitungsmöglichkeit beim späteren Öffnen der Datei erhalten.
Gliederung: Damit werden die Schriftarten umrissen und als Pfade mit den richtigen Stilen gespeichert. Dadurch wird niemand in der Lage sein, Ihre Schriftart als Zeichen zu bearbeiten, aber es wird dazu führen, dass der Text genau so angezeigt wird, wie Sie ihn erstellt haben, jedoch auf Kosten einer größeren Dateigröße.
Einbetten: Eingebettete Bilder können innerhalb der SVG selbst in einer Methode gespeichert werden, die als Base64-Verschlüsselung bekannt ist. Dies führt zu höheren Dateigrößen, stellt aber sicher, dass das Bild niemals von der SVG-Datei getrennt wird.
Link: SVGs können auch Bilder aus externen Quellen abrufen, was praktisch sein kann, wenn Sie Speicherplatz sparen müssen, indem Sie kein Bild darin einbetten. Dies muss von anderen Teilen Ihrer Festplatte oder Ihres Webservers abgerufen werden, kann jedoch leicht getrennt werden, wenn das Bild oder die SVG-Datei von ihrem Speicherort verschoben wird.
Beibehalten: Illustrator wählt aus, welche davon verwendet werden soll, je nachdem, wie sie in der .AI-Datei gespeichert ist, da Illustrator sowohl eingebettete als auch verknüpfte Bilder unterstützt.
Elementen wird kein ID-Attribut zugewiesen, es sei denn, Sie haben eines angegeben oder es wird durch eine der folgenden Regeln außer Kraft gesetzt.
Ebenennamen: Dadurch werden Elemente in einer Ebene zusammen gruppiert und der Ebene die ID ihres Namens gegeben. Minimal: Dadurch werden alle Ebenengruppen und IDs von allen Elementen entfernt, was zu etwas kleineren Dateigrößen führt, aber alle Javascript-Funktionen verliert. Eindeutig: Dies gibt allen Elementen eindeutige IDs wie (3ff10d7d-c4ce-48dc-ba65-100cea7ab8e7).
Minify entfernt alle Newline-Zeichen, was bedeutet, dass sich das gesamte SVG in einer Zeile befindet. Dies erschwert das Lesen für einen Menschen, macht aber für einen Computer keinen Unterschied. Es ist manchmal erforderlich, dass einige Programme die Datei richtig lesen.
Responsive checkbox ändert den Header des SVG so, dass das SVG unendlich skaliert werden kann, um in die Box zu passen, in der es sich befindet (das Fenster, das div, iframe usw.). Dies kann jedoch die Funktionalität einiger Programme beeinträchtigen oder beeinträchtigen, seien Sie also vorsichtig davon.
Überlegen Sie, ob Ihre Ausgabe gedruckt oder im Internet erfolgen soll. Probieren Sie zuerst die Standardeinstellungen aus und drucken Sie dann entweder ein Beispiel aus, um zu sehen, wie es aussieht, oder versuchen Sie, es in einer anderen SVG-kompatiblen Anwendung wie Inkscape oder einem Webbrowser zu öffnen, um zu sehen, ob etwas Seltsames passiert ist.
Daniel Bäcker