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!