25: Manuelles Optimieren von SVG in Illustrator - CSS-Tricks

Anonim

Das Video wurde auf diesem entfernt. Ich werde es eines Tages bald wieder drehen. Wenn Sie dies lesen und ich es noch nicht getan habe, können Sie mich gerne kontaktieren und mich darüber nerven.

Manchmal sieht das SVG, das Sie verwenden möchten, in Illustrator perfekt aus, aber es ist nicht ganz so, wie Sie es im Web verwenden möchten.

Eines der Dinge, die wir in diesem Video betrachten, ist eine einfache Form, die wie eine einzelne Form aussieht, aber tatsächlich vier Formen sind, die übereinander sitzen. Um dies zu vereinfachen, wählen wir einfach alle Formen aus und kombinieren sie mit den Pathfinder-Werkzeugen in Illustrator zu einer einzigen Form. Wir können das sofort im Code sehen. Manchmal macht es Spaß, die SVG-Datei sowohl in Illustrator als auch in einem Code-Editor zu öffnen, damit Sie beim Speichern sehen können, was sie mit dem Code macht.

Der Pathfinder eignet sich hervorragend zur manuellen Optimierung von Formen - es lohnt sich zu erfahren, was diese Schaltflächen tun - und was sie auch bei gedrückter Optionstaste tun.

Die Größe einer SVG-Datei hängt in hohem Maße davon ab, wie viele Punkte in den Formen vorhanden sind. Es gibt noch andere Faktoren, aber das ist das große Problem. Eine andere Sache, die wir uns in diesem Video ansehen, ist die Verwendung der Illustrators Simplify Path-Funktion, um die Anzahl der Punkte auf einigen texturähnlichen Formen zu reduzieren und die Dateigröße erheblich zu verringern.

Noch etwas zu wissen: Zusammengesetzte Pfade können nützlich sein. Zwei Formen, die völlig voneinander getrennt sind, können immer noch ein Pfad sein. Wie buchstäblich eins. Die Syntax ermöglicht es im Wesentlichen, „den Stift aufzunehmen, an einen anderen Ort zu verschieben, etwas Neues zu zeichnen“. Wenn Sie also einen zusammengesetzten Pfad in Illustrator erstellen (z. B. mehrere unabhängige Formen, Objekt> Zusammengesetzter Pfad> Erstellen), wird dieser ausgegeben. Kann zu einer vereinfachten / optimierten SVG-Ausgabe führen.