Schneller Tipp Weniger Knoten = Leichter SVG

Vor kurzem habe ich auf der snap.svg-Seite gespielt (schauen Sie mal, ob Sie es noch nicht selbst benutzt haben). Es hat einen wirklich schönen SVG-Polygon-Hintergrund im Header, der bei mageren 2,2 Kb wiegt. Weil ich komisch bin, habe ich beschlossen, es kleiner zu machen.

In Illustrator

Die SVG-Datei selbst sieht beim Öffnen in Illustrator so aus:

Wenn Sie dann die Gliederungsansicht überprüfen (Ansicht> Gliederung) Sie sehen alle Vektorpfade ohne Füllfarben:

„Was für ein Durcheinander!“ Ich dachte, „Ich bin sicher, dass ich das aufräumen und die Dateigröße reduzieren kann.“ Ich habe also die Zeilen aufgeräumt, um alle unnötigen Überlappungen zu beseitigen. 

Rätselhaft

Mit dem Pfadfinder Mit diesem Werkzeug können Sie Objekte dazu verwenden, ihre Form aus untergeordneten Objekten zu "schneiden". Auf diese Weise können Sie das Überlappen von Formen vermeiden, stattdessen einen "Puzzle" -Effekt zu erzeugen.

Davon… … Dazu

Viel besser. Nachdem ich dasselbe mit der gesamten Illustration gemacht hatte, sah ich folgendes an:

Ich hab mich geirrt

Dabei schrumpfte die Dateigröße nicht, sie wuchs. Während das Original 2,217 Kb wog, wog die neue Version 2,269 Kb. Ein winziger Unterschied in der Realität, aber die Aufräumarbeiten hatten die Akte dennoch schwerer gemacht. Bei einer größeren Grafik könnte der Effekt einen großen Unterschied gemacht haben.

Aber warum? Es liegt alles an Knoten, oder Anker; die Gelenke entlang eines Vektorpfads. SVG-Dateien sind nichts anderes als XML-Daten, und jeder Knoten entlang eines Pfads erfordert zusätzliche Koordinaten. Die Originaldatei wurde möglicherweise aus mehreren überlappenden Dreiecken erstellt Schichtung kostet keine Dateigröße (alle Objekte innerhalb eines XML-Dokuments werden von Haus aus in der Reihenfolge angezeigt). Was die zusätzliche Größe geschaffen hat, war, dass ich aus den Dreiecken vierseitige (vierseitige) Polygone gemacht habe. Hoppla.

So sehen sie als SVG-Code aus, zuerst eines der Originale:

Und jetzt eine meiner "verbesserten" Formen:

Weitere Daten So einfach ist das.

Reinigen Sie Ihre Knoten

Die daraus resultierende Lektion besteht darin, unerwünschte Knoten aus Ihren SVG-Dateien zu entfernen, ohne sich jedoch überlappen zu müssen. Das Ablegen von Knoten ist die wichtigste Möglichkeit, die Komplexität und damit die Dateigröße zu reduzieren.

Verwenden Sie die Ankerpunkt-Werkzeug löschen (-) einen Anker aus einem Pfad entfernen. Sie werden überrascht sein, wie wenig Anker ein Vektorpfad benötigt, während er seine Form beibehält! Ein gut platzierter Anker erledigt drei schlecht durchdachte Anker.

Streupunkte

Ein letzter Tipp ist, streunende Punkte aus Ihrem SVG zu entfernen. Streupunkte sind oft unsichtbar, weil sie nicht gefüllt werden können, aber sie kosten trotzdem Daten. Wechseln Sie in Illustrator zu Wählen Sie> Objekt> Streupunkte Um sie alle auszuwählen, drücken Sie löschen um sie zu entfernen.

Störende verirrte Ankerpunkte

Ich hoffe du hast etwas daraus gelernt! Es ist eines dieser scheinbar offensichtlichen Dinge, an die ich vorher nie gedacht hatte. Hattest du?