Wie man SVG-Code mit einfachen Formen vereinfacht

Es gibt verschiedene Möglichkeiten, mit Icons zu arbeiten, aber die beste Lösung beinhaltet immer SVG, egal ob es inline implementiert oder als Bilddatei verknüpft ist. Das liegt daran, dass sie im Code „gezeichnet“ werden, was sie flexibel, anpassungsfähig und skalierbar in jedem Kontext macht.

Aber bei der Arbeit mit SVG besteht immer die Gefahr, dass sie viel unnötigen Code enthalten. In einigen Fällen kann der Code für ein Inline-SVG so lang sein, dass das Scrollen durch ein Dokument länger dauert, die Arbeit erschwert wird und es sogar ein wenig schwerer ist, als es sein müsste.

Wir können dies umgehen, indem wir Codeabschnitte mit dem <use>-Element wiederverwenden oder native Variablen anwenden, um unsere SVG-Stile von einem Ort aus zu verwalten. Oder, wenn wir in einer serverseitigen Umgebung arbeiten, können wir immer ein wenig PHP (oder ähnliches) einstreuen, um den Inhalt der SVG-Datei zu extrahieren, anstatt ihn direkt einzufügen.

Das ist alles gut und schön, aber wäre es nicht großartig, wenn wir dies auf Dateiebene lösen könnten, anstatt auf codebasierte Ansätze zurückzugreifen? Ich möchte mich auf eine *andere* Perspektive konzentrieren: wie man dieselben Figuren mit *weniger Code* unter Verwendung von einfachen Formen erstellt. Auf diese Weise erhalten wir die Vorteile von kleineren, kontrollierbaren und semantischen Icons in unseren Projekten, ohne Kompromisse bei Qualität oder visuellen Änderungen einzugehen. Ich werde verschiedene Beispiele durchgehen, die den Code gängiger Icons untersuchen und wie wir sie mit einigen der einfachsten SVG-Formen, die wir erstellen können, neu zeichnen können.

Hier sind die Icons, an denen wir arbeiten werden

Betrachten wir die einfachen Formen, die wir verwenden können, um diese zu erstellen, wodurch der Code klein und einfach bleibt.

Psst! Hier ist eine längere Liste einfacher Icons, die ich auf holasvg.com erstellt habe! Nach diesem Artikel wissen Sie, wie Sie sie modifizieren und zu Ihren eigenen machen können.

Vereinfachung eines Schließsymbols mit dem <line>-Element

Dies ist der Code für das „Schließ“- oder „Kreuz“-Symbol, das von flaticon.com heruntergeladen und von pixel-perfect erstellt wurde

In diesem Beispiel geschieht alles innerhalb des <path> mit vielen Befehlen und Parametern im data-Attribut (d). Was dieses SVG tut, ist, die Form anhand ihrer Grenzen nachzuzeichnen.

Wenn Sie mit Illustrator vertraut sind, ist dies das Äquivalent zum Zeichnen zweier separater Linien, deren Umwandlung in Formen und dann das Kombinieren beider mit dem Pathfinder, um eine zusammengesetzte Form zu erstellen.

Das <path>-Element ermöglicht es uns, komplexe Formen zu zeichnen, aber in diesem Fall können wir dieselbe Figur mit zwei Linien erstellen und dabei das gleiche Erscheinungsbild beibehalten

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" overflow="visible" stroke="black" stroke-width="10" stroke-linecap="round">
   <line x1="0" y1="0" x2="50" y2="50" />
   <line x1="50" y1="0" x2="0" y2="50" />
</svg>

Wir begannen mit der Definition einer viewBox, die von 0,0 bis 50,50 reicht. Sie können beliebige Abmessungen wählen; das SVG wird sich immer gut an jede von Ihnen definierte Breite und Höhe anpassen. Um die Dinge zu erleichtern, habe ich in diesem Fall auch eine Inline-Breite und -Höhe von 50 Einheiten definiert, was zusätzliche Berechnungen beim Zeichnen vermeidet.

Um das <line>-Element zu verwenden, deklarieren wir die Koordinaten des ersten Punkts der Linie und die Koordinaten ihres Endpunkts. In diesem speziellen Fall begannen wir bei x=0 y=0 und endeten bei x=50 y=50.

Hier ist, wie das im Code aussieht

<line x1="0" y1="0" x2="50" y2="50" />

Die zweite Linie beginnt bei x=50 y=0 und endet bei x=0 y=50

<line x1="50" y1="0" x2="0" y2="50" />

Ein SVG-Strich hat standardmäßig keine Farbe – deshalb haben wir den Wert black im stroke-Attribut hinzugefügt. Wir haben dem stroke-width-Attribut eine Breite von 10 Einheiten und stroke-linecap einen Wert von round gegeben, um diese abgerundeten Ecken des Originaldesigns nachzubilden. Diese Attribute wurden direkt zum <svg>-Tag hinzugefügt, sodass beide Linien sie erben.

<svg ... stroke="black" stroke-width="10" stroke-linecap="round" ...>

Da der Strich nun 10 Einheiten größer ist als seine Standardgröße von 1 Einheit, kann die Linie durch die viewBox abgeschnitten werden. Wir können entweder die Punkte 10 Einheiten innerhalb der viewBox verschieben oder overflow=visible zu den Stilen hinzufügen.

Die Werte, die gleich 0 sind, können entfernt werden, da 0 der Standardwert ist. Das bedeutet, dass die beiden Linien zu zwei sehr kleinen Codezeilen werden.

<line x2="50" y2="50" />
<line x1="50" y2="50" />

Allein durch die Umwandlung eines <path> in eine <line> haben wir nicht nur eine kleinere SVG-Datei erstellt, sondern auch einen semantischeren und kontrollierbareren Codeblock, der die zukünftige Wartung erheblich erleichtert. Und das visuelle Ergebnis ist genau dasselbe wie beim Original.

Gleiches Kreuz, anderer Code.

Vereinfachung eines Uhr-Icons mit <circle>- und <path>-Elementen

Ich habe dieses Beispiel eines Uhr-Icons verwendet, das von barracuda vom The Noun Project erstellt wurde

Diese Form wurde ebenfalls mit einem <path> gezeichnet, aber wir haben auch viele Namespaces und XML-Anweisungen im Zusammenhang mit der verwendeten Software und der Lizenz der Datei, die wir löschen können, ohne das SVG zu beeinträchtigen. Können Sie erkennen, welcher Illustrationseditor zur Erstellung des Icons verwendet wurde?

Lassen Sie uns dieses von Grund auf neu erstellen, indem wir einen Kreis und einen Pfad mit einfacheren Befehlen verwenden. Wieder müssen wir mit einer viewBox beginnen, diesmal von 0,0 bis 100,100, und mit einer Breite und Höhe, die diesen Einheiten entsprechen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" fill="none" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="50" cy="50" r="40"/>
  <path d="M50 25V50 H75" /> 
</svg>

Wir behalten die gleichen Stile wie beim vorherigen Icon innerhalb des <svg>-Tags bei. fill ist standardmäßig black, daher müssen wir ihm explizit den Wert none geben, um ihn zu entfernen. Andernfalls hätte der Kreis eine solide schwarze Füllung, die die anderen Formen verdecken würde.

Um den <circle> zu zeichnen, müssen wir einen Mittelpunkt angeben, von dem aus der Radius ausgeht. Dies erreichen wir mit cx (center x) und cy (center y). Dann deklariert r (radius), wie groß unser Kreis sein wird. In diesem Beispiel ist der Radius etwas kleiner als die viewBox, sodass er bei einer Strichbreite von 10 Einheiten nicht abgeschnitten wird.

Was hat es mit all den Buchstaben auf sich? Schauen Sie sich Chris Coyiers illustrierten Leitfaden für eine Einführung in die SVG-Syntax an.

Wir können einen <path> für die Zeiger der Uhr verwenden, da dieser sehr nützliche und einfache Befehle zum Zeichnen hat. Innerhalb des d (data) müssen wir mit dem Befehl M (move to) beginnen, gefolgt von den Koordinaten, von wo wir mit dem Zeichnen beginnen werden, was in diesem Beispiel 50,25 ist (nahe der oberen Mitte des Kreises). 

Nach dem Befehl V (vertical) benötigen wir nur einen Wert, da wir uns nur nach oben oder unten mit einer negativen oder positiven Zahl bewegen können. Eine positive Zahl geht nach unten. Dasselbe gilt für H (horizontal), gefolgt von einer positiven Zahl, 75, die nach rechts zeichnet. Alle Befehle sind Großbuchstaben, sodass die von uns gewählten Zahlen Punkte im Gitter sind. Wenn wir uns entscheiden, Kleinbuchstaben (relative Befehle) zu verwenden, sind die Zahlen die Einheiten, die wir in einer Richtung bewegen, und nicht ein absoluter Punkt im Koordinatensystem.

Gleiche Uhr, anderer Code.

Vereinfachung eines Briefumschlag-Icons mit <rect>- und <polyline>-Elementen

Ich habe das Briefumschlag-Icon in Illustrator gezeichnet, ohne die ursprünglichen Formen zu erweitern. Hier ist der Code, der aus dem Export stammt

Illustrator bietet einige SVG-Optionen zum Exportieren der Grafik. Ich habe „Style Elements“ im Dropdown-Menü „CSS Properties“ gewählt, damit ich einen <style>-Tag mit Klassen erhalte, die ich in eine CSS-Datei verschieben möchte. Aber es gibt natürlich verschiedene Möglichkeiten, die Stile in SVG anzuwenden.

Wir haben in diesem Code bereits einfache Formen! Ich habe die Option „Shape to paths“ in Illustrator deaktiviert, was dort sehr geholfen hat. Wir können dies weiter mit SVGOMG optimieren, um Kommentare, XML-Anweisungen und unnötige Daten wie leere Elemente zu entfernen. Von dort aus können wir bei Bedarf manuell weitere Extras entfernen.

Wir haben bereits etwas etwas prägnanteres

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 310 190" xml:space="preserve">
  <style>.st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  </style><rect x="5" y="5" class="st0" width="300" height="180"/>
  <polyline class="st0" points="5 5 155 110 305 5"/>
</svg>

Wir können noch mehr entfernen, ohne das visuelle Erscheinungsbild des Umschlags zu beeinträchtigen, einschließlich:

• version="1.1" (dies ist seit SVG 2 veraltet)
• id="Layer_1" (dies hat keine Bedeutung oder Verwendung)
• x="0" (dies ist ein Standardwert)
• y="0" (dies ist ein Standardwert)
• xml:space="preserve" (dies ist seit SVG 2 veraltet)

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 310 190">
  <style>.st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  </style>
  <rect x="5" y="5" class="st0" width="300" height="180"/>
  <polyline class="st0" points="5 5 155 110 305 5"/>
</svg>

Wir können die CSS-Stile in ein separates Stylesheet verschieben, wenn wir wirklich aggressiv vorgehen wollen.

<rect> benötigt einen Startpunkt, von dem aus wir eine Breite und Höhe erweitern, also verwenden wir x="5" und y="5", was unser oberer linker Punkt ist. Von dort erstellen wir ein Rechteck mit einer Breite von 300 Einheiten und einer Höhe von 180 Einheiten. Genau wie beim Uhr-Icon verwenden wir 5,5 als Startpunkt, da wir einen 10-Einheiten-Strich haben, der abgeschnitten wird, wenn die Koordinaten bei 0,0 liegen.

<polyline> ähnelt <line>, jedoch mit einer unendlichen Anzahl von Punkten, die wir definieren, wie Koordinatenpaare, eines nach dem anderen, innerhalb des Attributs „points“, wobei die erste Zahl im Paar x und die zweite y darstellt. Es ist einfacher, die Sequenz mit Kommas zu lesen, aber diese können durch Leerzeichen ersetzt werden, ohne das Ergebnis zu beeinträchtigen.

Gleicher Umschlag, anderer Code.

Bonusformen!

Ich habe keine Beispiele für Icons aufgenommen, die mit <polygon>- und <ellipse>-Formen vereinfacht werden können, aber hier ist eine schnelle Möglichkeit, sie zu verwenden.

<polygon> ist dasselbe wie <polyline>, nur dass dieses Element immer eine geschlossene Form definiert. Hier ist ein Beispiel direkt von MDN

Erinnern Sie sich an den Kreis, den wir zuvor für das Uhr-Icon gezeichnet haben? Ersetzen Sie r (radius) durch rx und ry. Jetzt haben Sie zwei verschiedene Werte für den Radius. Hier ist ein weiteres Beispiel von MDN

Zusammenfassung

Wir haben hier in kurzer Zeit viel abgedeckt! Während wir Beispiele zur Veranschaulichung des Prozesses der Optimierung von SVGs verwendet haben, sind hier die wichtigsten Erkenntnisse, die Sie aus diesem Beitrag mitnehmen sollten

• Denken Sie daran, dass die Komprimierung damit beginnt, wie das SVG in der Illustrationssoftware gezeichnet wird.
• Verwenden Sie verfügbare Werkzeuge wie SVOMG, um SVG zu komprimieren.
• Entfernen Sie bei Bedarf unnötige Metadaten von Hand.
• Ersetzen Sie komplexe Pfade durch einfache Formen.
• <use> ist eine großartige Möglichkeit, SVG „inline“ zu setzen und auch Ihre eigene Bibliothek wiederverwendbarer Icons zu erstellen.

Wie viele Icons können durch die Kombination dieser einfachen Formen erstellt werden?

Ich arbeite an meiner Liste auf holasvg.com/icons, ich werde hier ständig weitere Icons und Funktionen hochladen, und jetzt wissen Sie, wie Sie sie einfach modifizieren können, indem Sie nur ein paar Zahlen ändern. Machen Sie sie zu Ihren eigenen!