So vereinfachen Sie den SVG -Code mithilfe grundlegender Formen

Es gibt viele Möglichkeiten, mit Symbolen umzugehen, aber der beste Ansatz umfasst immer SVG, unabhängig davon, ob es inline implementiert ist oder als Link zu einer Bilddatei. Dies liegt daran, dass sie in Code "gezeichnet" werden, was sie flexibel, anpassungsfähig und in jeder Umgebung flexibel und skalierbar macht.

Bei der Verwendung von SVG ist es jedoch immer möglich, eine Menge unnötiger Code aufzunehmen. In einigen Fällen kann der Code für eingebrauchtes SVG so lang sein, dass das Dokument länger scrollt und unangenehm zu verwenden ist und ja, etwas schwerer als es sein muss.

Wir können verwenden<use></use> Elemente verwenden Codeblöcke wieder oder wenden nativen Variablen an, um unsere SVG -Stile an einem Ort zu verwalten. Wenn wir in einer serverseitigen Umgebung arbeiten, können wir jederzeit einen PHP (oder ähnlichen) hinzufügen, um den Inhalt der SVG-Datei zu extrahieren, anstatt sie direkt einzulegen.

Das ist alles gut, aber wäre es nicht schön, wenn wir dieses Problem auf der Dateiebene lösen könnten, anstatt auf einen codebasierten Ansatz zurückzugreifen? Ich möchte mich auf eine andere Perspektive konzentrieren: So erstellen Sie dasselbe Diagramm mit weniger Code mit grundlegenden Formen . Auf diese Weise können wir die Vorteile kleinerer, kontrollierbarerer und semantischerer Ikonen im Projekt nutzen, ohne Qualität oder visuelle Veränderungen zu beeinträchtigen. Ich werde verschiedene Beispiele abdecken, den Code für gemeinsame Symbole untersuchen und wie man sie mit einigen der einfachsten SVG -Formen neu streicht, die wir herstellen können.

Hier sind die Ikonen, mit denen wir uns befassen werden:

Schauen wir uns die grundlegenden Formen an, die wir verwenden können, um diese Symbole zu erstellen, die den Code klein und einfach halten.

Shh! Hier ist eine längere Liste einfacher Symbole, die ich auf Holasvg.com erstellt habe! Nach dem Lesen dieses Artikels wissen Sie, wie Sie sie ändern und zu Ihnen herstellen.

verwenden<line></line> Element vereinfachtes Schließes Symbol

Hier ist der Code für das von flaticon.com heruntergeladene und von Pixel-Perfect: Erstellte "Close" oder "Cross" -Kon:

In diesem Beispiel passiert alles<path></path> Im Inneren gibt es viele Befehle und Parameter im Datenattribut (d). Diese SVG verfolgt die Form von seinen Grenzen.

Wenn Sie mit Illustrator vertraut sind, ist dies gleichwertig mit dem Zeichnen von zwei getrennten Linien, dem Umwandeln in Formen und dann mit einem Pfadfinder, um eine zusammengesetzte Form zu erstellen.

<path></path> Elemente ermöglichen es uns, komplexe Formen zu zeichnen, aber in diesem Fall können wir dieselbe Figur mit zwei Linien erstellen und gleichzeitig das gleiche Erscheinungsbild beibehalten:

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

Wir definieren zuerst eine Viewbox von 0,0 bis 50,50. Sie können jede Größe auswählen, die Ihnen gefällt. Das SVG wird immer gut auf jede Breite und Höhe skalieren, die Sie definieren. Um den Betrieb zu vereinfachen, habe ich in diesem Fall auch 50 Einheiten der Inline -Breite und -höhe definiert, wodurch zusätzliche Berechnungen in der Zeichnung vermieden werden.

Zu verwenden<line></line> Element müssen die Koordinaten des ersten Punktes der Linie und die Koordinaten des letzten Punktes deklarieren. In diesem Beispiel beginnen wir mit x = 0 y = 0 und enden mit x = 50 y = 50.

So sieht der Code aus:

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

Die zweite Zeile beginnt mit x = 50 y = 0 und endet mit x = 0 y = 50:

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

SVG -Striche haben standardmäßig keine Farbe - deshalb fügen wir dem Stroke -Attribut schwarze Werte hinzu. Wir bieten auch 10 Einheiten Breite für die Eigenschaft der Schlaganfallbreite und setzen die Schlaganfall-Linie auf den Kreiswert, um die abgerundeten Ecken des ursprünglichen Designs zu kopieren. Diese Eigenschaften werden direkt zu hinzugefügt<svg></svg> Im Tag erben sie im Tag.

Da der Schlaganfall 10 Einheiten größer ist als die Standardeinheit der Standardgröße 1, kann die Viewbox die Leitung aufnehmen. Wir können die Punkte 10 -Einheiten in die Viewbox verschieben oder dem Stil Überlauf = sichtbar hinzufügen.

Werte, die gleich 0 sind, können gelöscht werden, da 0 der Standardwert ist. Dies bedeutet, dass zwei Zeilen nur zwei sehr kleine Codezeilen haben:

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

Einfach von<path></path> Wechseln zu<line></line> Wir erstellen nicht nur eine kleinere SVG -Datei, sondern auch einen semantischeren und kontrollierbaren Codeblock, der die zukünftige Wartung erleichtert. Der visuelle Effekt entspricht genau dem Originalbild.

Gleiches Kreuz, unterschiedliche Codes.

verwenden<circle></circle> Und<path></path> Element vereinfachtes Uhrensymbol

Ich habe dieses Clock -Symbolbeispiel von Barracuda im NOUN -Projekt erhalten:

Diese Form wird auch verwendet<path></path> Zeichnen, aber wir haben auch viele Namespace- und XML -Anweisungen im Zusammenhang mit der verwendeten Software- und Dateilizenz, die wir löschen können, ohne SVG zu beeinflussen. Können Sie feststellen, welchen Illustrationseditor das Symbol erstellt?

Lassen Sie uns dies mit einem Kreis und einem Pfad mit einfacheren Befehlen von Grund auf neu erstellen. Auch hier müssen wir mit einer Viewbox beginnen, diesmal von 0,0 auf 100.100 und die Breite und Höhe entsprechen diesen Einheiten.

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

wir werden<svg></svg> Der Stil im Etikett bleibt dem vorherigen Symbol gleich. Füllen Sie die Standardeinstellungen nach Schwarz aus, sodass wir ihm explizit einen Wert zuweisen müssen, um es zu löschen. Andernfalls hat der Kreis eine reine schwarze Füllung, die andere Formen behindert.

Zeichnen<circle></circle> Wir müssen den Mittelpunkt angeben, an dem sich der Radius befindet. Wir können dies mit CX (Mitte X) und Cy (Mitte Y) tun. Dann wird R (Radius) erklären, wie groß unser Kreis ist. In diesem Beispiel ist der Radius etwas kleiner als die Viewbox, sodass er nicht beschnitten wird, wenn die Schlagbreite 10 Einheiten beträgt.

Was ist mit all diesen Briefen los? In Chris Coyiers Illustrationshandbuch finden Sie eine Einführung in die SVG -Grammatik.

Wir können den Taktzeiger verwenden<path></path> , weil es einige sehr nützliche und einfache Zeichnungsbefehle hat. In D (Daten) müssen wir mit dem Befehl M (Wechsel zu) beginnen, gefolgt von den Koordinaten, die wir zeichnen werden, in diesem Fall 50,25 (in der Nähe der oberen Mitte des Kreises).

Nach dem Befehl v (vertikal) benötigen wir nur einen Wert, da wir nur negative oder positive Zahlen nach oben oder unten bewegen können. Eine positive Zahl wird nach unten bewegt. Gleiches gilt für H (Level), gefolgt von einer positiven Zahl 75, die nach rechts gezogen wird. Alle Befehle werden aktiviert, sodass die Anzahl, die wir auswählen, die Punkte im Netz sind. Wenn wir uns für die Verwendung von Kleinbuchstaben (relative Befehle) entscheiden, ist die Nummer die Anzahl der Einheiten, die wir in eine Richtung bewegen, nicht der absolute Punkt im Koordinatensystem.

Gleiche Uhr, verschiedene Codes.

verwenden<rect></rect> Und<polyline></polyline> Element vereinfachte Umschlagsymbol

Ich habe das Umschlagsymbol in Illustrator gezeichnet, ohne die ursprüngliche Form zu erweitern. Hier ist der Code aus dem Export:

Illustrator bietet einige SVG -Optionen zum Exportieren von Grafiken. Ich habe das "Style-Element" im Dropdown-Menü "CSS Properties" ausgewählt, damit ich ein Tag mit der Kategorie habe, die ich in die CSS-Datei umziehen möchte. Natürlich gibt es viele Möglichkeiten, SVG -Stile anzuwenden.

Wir haben bereits einige grundlegende Formen in diesem Code! Ich habe in Illustrator nicht die Option "Form zu Pfad" ausgewählt, was hier sehr hilft. Wir können es mit SVGOMG weiter optimieren, um Kommentare, XML -Direktiven und unnötige Daten wie leere Elemente zu entfernen. Wir können bei Bedarf zusätzliche Extras von dort aus manuell löschen.

Wir haben schon etwas Einfacheres:

<code><svg version="1.1" viewbox="0 0 310 190" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0">
 .St0 {fill: Keine; Stroke:#000; Stroke-Width: 10; Stroke-Lindecap: Round; Stroke-Linejoin: Round; Stroke-Miterlimit: 10}
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

Wir können mehr Inhalte löschen, ohne das visuelle Erscheinungsbild des Umschlags zu beeinflussen, einschließlich:

• Version = "1.1" (veraltet seit SVG 2)
• (Dies hat keine Bedeutung oder Zweck)
• x = "0" (Dies ist ein Standardwert)
• y = "0" (Dies ist ein Standardwert)
• XML: Space = "Preserve" (veraltet seit SVG 2)

<code><svg viewbox="0 0 310 190" xmlns="http://www.w3.org/2000/svg">
 .St0 {fill: Keine; Stroke:#000; Stroke-Width: 10; Stroke-Lindecap: Round; Stroke-Linejoin: Round; Stroke-Miterlimit: 10}
  
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

Wenn wir wirklich sehr aggressiv sein wollen, können wir die CSS -Stile in ein separates Stylesheet bewegen.

<rect></rect> Benötigen Sie einen Ausgangspunkt, an dem wir die Breite und Höhe von dort aus erweitern. Von dort aus werden wir ein Rechteck mit einer Breite von 300 Einheiten und einer Höhe von 180 Einheiten schaffen. Genau wie das Uhrensymbol werden wir 5,5 als Ausgangspunkt verwenden, da wir einen 10-Einheiten-Schlaganfall haben, der beschnitten wird, wenn die Koordinaten bei 0,0 liegen.

<polyline></polyline> Ähnlich<line></line> Aber dieses Element definiert immer eine geschlossene Form. Hier ist ein Beispiel direkt von MDN:

Erinnern Sie sich an die Kreise, die wir zuvor für das Uhrensymbol gezeichnet haben? Ersetzen Sie R (Radius) durch RX und RY. Jetzt haben Sie zwei verschiedene Radiuswerte. Hier ist ein weiteres Beispiel von MDN:

Zusammenfassen

Wir haben in kurzer Zeit viele Inhalte behandelt! Während wir Beispiele verwenden, um den Prozess der Optimierung von SVG zu demonstrieren, hoffe ich, dass Sie aus diesem Beitrag Folgendes erhalten:

• Denken Sie daran, dass die Komprimierung mit der Art und Weise beginnt, wie SVG in der Illustrationssoftware gezogen wird.
• Verwenden Sie verfügbare Tools wie SVOMG, um SVG zu komprimieren.
• Wenn nötig unnötige Metadaten manuell löschen.
• Ersetzen Sie komplexe Pfade durch grundlegende Formen.
• <use></use> Ist eine großartige Möglichkeit, SVGs zu "inline" und Ihre eigene wiederverwendbare Icon -Bibliothek aufbauen.

Wie viele Symbole können durch Kombinieren dieser grundlegenden Formen erzeugt werden?

Ich erstelle meine Liste auf Holasvg.com/icons und werde hier immer mehr Symbole und Funktionen hochladen. Jetzt wissen Sie, wie Sie sie leicht ändern können, indem Sie ein paar Zahlen ändern. Mach weiter, lass sie dir gehören!

Das obige ist der detaillierte Inhalt vonSo vereinfachen Sie den SVG -Code mithilfe grundlegender Formen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!