Wie man SVG handcodiert

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Final product image — What You'll Be Creating

Eines der großartigen Dinge an skalierbaren Vektorgrafiken (abgesehen davon, dass sie ohne Qualitätsverlust unendlich skalierbar sind) ist, dass Sie, sobald Sie die Grundlagen kennen, einfache Formen ganz einfach von Hand codieren können, ohne eine Grafikanwendung öffnen zu müssen.

Mit nur wenigen Codezeilen können Sie Ihre eigenen benutzerdefinierten Symbole erstellen und wissen genau, wie jedes einzelne zusammengesetzt ist. Wenn Sie Ihre eigenen SVGs erstellen, stellen Sie sicher, dass sie so effizient wie möglich geschrieben werden, und Sie haben die maximale Kontrolle, wenn Sie sie auf Ihren Websites verwenden.

In diesem Tutorial werden wir alle Grundlagen des Codierens von SVGs von Hand behandeln, aber ich werde Sie nicht mit einem trockenen Vortrag langweilen, der nur die relevanten Formen und Attribute herausarbeitet. Stattdessen lernen Sie, wie Sie SVG üben, indem Sie die sechs Symbole erstellen, die Sie zu Beginn dieses Tutorials sehen (sehen Sie sich die Demo online an). Dabei verwenden Sie alle grundlegenden Elemente, die für die SVG-Handcodierung erforderlich sind.

Apropos grundlegende Elemente, lassen Sie uns eine kurze Einführung in die einzelnen Elemente geben.

Grundlegende SVG-Elemente

Sie können mit SVG sehr komplex werden, aber das ist für die Symbole, die wir erstellen werden, nicht notwendig. Die folgende Liste umfasst die Bausteine, die wir benötigen.

<svg> Umschließt und definiert die gesamte Grafik. <svg> ist für eine skalierbare Vektorgrafik das, was das Element <html> für eine Webseite ist.
<line> Erzeugt einzelne gerade Linien.
<polyline> Erzeugt Linien mit mehreren Segmenten.
<rect> Erstellt Rechtecke und Quadrate.
<ellipse> Erzeugt Kreise und Ovale.
<polygon> Erzeugt Formen mit geraden Seiten, mit drei oder mehr Seiten.
<path> Erzeugt jede beliebige Form, indem Sie Punkte und die Linien zwischen ihnen definieren.
<defs> Definiert wiederverwendbare Assets. Nichts, was in diesem <defs>-Abschnitt platziert wird, ist anfänglich sichtbar. <defs> ist für eine skalierbare Vektorgrafik das, was das Element <head> für eine Webseite ist.
<g> Fügt mehrere Formen in eine Gruppe ein. Platzieren Sie Gruppen im Abschnitt <defs>, damit sie wiederverwendet werden können.
<symbol> Wie eine Gruppe, aber mit einigen zusätzlichen Funktionen. Wird normalerweise im Abschnitt <defs> platziert.
<use> Übernimmt Assets, die im Abschnitt <defs> definiert sind, und macht sie im SVG sichtbar.

Während wir unsere Symbole durchgehen und erstellen, werden wir diese Liste von Elementen in der oben gezeigten Reihenfolge durcharbeiten.

Starterdateien

Bevor wir beginnen, besorgen Sie sich eine Kopie der Starterdateien aus dem GitHub-Repository. Sie können entweder eine ZIP-Datei herunterladen oder das Repository auf Ihr eigenes System klonen.

Wir beginnen mit einem Dokument, das bereits einige grundlegende HTML- und CSS-Elemente enthält. Dies verleiht den SVGs, die wir erstellen, ein gewisses Styling und Sie richten auch ein kleines Raster auf der Seite ein. Wir werden unsere Symbole über diesem Raster erstellen, und hoffentlich hilft es Ihnen, die Koordinaten zu visualisieren, mit denen Sie beim Ablegen Ihrer SVGs arbeiten.

Wenn Sie „handcodedsvg.html“ aus dem Quellordner „Starter Files“ öffnen, sollten Sie Folgendes sehen:

Quick Primer für `x`- und `y`-Werte

Beim Arbeiten im 2D-Raum auf einer Website wird die horizontale Achse durch x und die vertikale Achse durch y dargestellt. Positionen entlang jeder dieser Achsen werden durch Zahlen dargestellt. Wenn wir etwas nach rechts verschieben möchten, müssen wir zunehmende x-Werte verwenden, und um nach links zu verschieben, verwenden wir abnehmende x-Werte. Um etwas nach unten zu verschieben, verwenden wir steigende y-Werte, und um etwas nach oben zu verschieben, verwenden wir abnehmende y-Werte.

Eine übliche Abkürzung zum Ausdrücken der x- und y-Werte eines einzelnen Punktes ist (x, y). Ein Punkt bei 10 auf der x-Achse und 50 auf der y-Achse könnte beispielsweise als (10, 50) geschrieben werden. Ich werde diese Abkürzung in diesem Tutorial von Zeit zu Zeit verwenden.

Beachten Sie die beiden dunkelsten Linien in unserem Raster? Wir werden unser SVG so platzieren, dass seine obere linke Ecke an der Stelle ausgerichtet ist, an der sie sich schneiden. Als solcher repräsentiert dieser Schnittpunkt die Position x = 0 und y = 0 oder (0,0) in unserem SVG.

Das Hintergrundraster

Jede der hellsten Rasterlinien stellt 10px dar, und die Linien mittlerer Dicke repräsentieren 100px. Wenn wir also ein Objekt von einer Linie mittlerer Dicke zur nächsten nach unten verschieben möchten, erhöhen wir seine Position auf der y-Achse um eins 100px.

Wenn das immer noch etwas unklar klingt, machen Sie sich keine Sorgen, dies wird alles sinnvoll sein, wenn wir uns mit den praktischen Aspekten der Erstellung unserer SVG-Symbole befassen.

Standard-SVG-Styling

Beachten Sie, dass in der HTML-Startdatei einige CSS mit Standardstil für unsere bald erstellten SVG-Symbole enthalten sind:

svg {
  stroke: #000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

Dadurch werden unsere Symbole so eingestellt, dass sie keine Füllungen und schwarze 5px breite Striche mit abgerundeten Kappen und Verbindungen haben.

1. Einrichten des SVG

Der erste Schritt beim Erstellen einer SVG-Datei besteht darin, ein <svg></svg>-Element festzulegen. Alles, was Ihr SVG anzeigen soll, muss sich zwischen diesen Tags befinden. Es gibt einige Attribute, die Sie für dieses Element verwenden können, aber wir halten die Dinge einfach und verwenden nur width und height.

Fügen Sie im Abschnitt <body> Ihres HTML-Dokuments den folgenden Code hinzu:

<svg width="750" height="500">

</svg>

Hinweis: Das CSS in unserer Starterdatei wird dieses SVG um 100px nach unten und rechts verschieben, sodass seine obere linke Ecke am Schnittpunkt der beiden dunkelsten Linien auf unserem Hintergrundraster positioniert wird. Und die Werte in den CodePen-Demos in diesem Tutorial können auch leicht abweichen – aber Sie können gerne damit herumspielen.

2. Erstellen Sie das Symbol „Linksbündig“

Beginnen wir mit der Verwendung des <line>-Elements, um dieses links ausgerichtete Symbol zu erstellen:

Das Linienelement hat vier Attribute, die Sie verwenden müssen:

x1 horizontaler Startpunkt der Linie
y1 vertikaler Startpunkt der Linie
x2 horizontaler Endpunkt der Linie
y2 vertikaler Endpunkt der Linie

Um das Obige zusammenzufassen, verwenden Sie die Attribute x1 und y1, um festzulegen, wo die Linie beginnt, und die Attribute x2 und y2, um festzulegen, wo die Linie endet.

Lassen Sie uns die erste Zeile unseres Symbols erstellen, die ganz oben. Wir werden die Linie 45px lang machen, aber der 5px-Strich, den wir verwenden, fügt einige zusätzliche Pixel um die Außenseite unserer Linie hinzu. Daher müssen wir unsere Linie um 3px nach unten und rechts versetzen, um sicherzustellen, dass keines der durch den Strich erzeugten zusätzlichen Pixel abgeschnitten wird.

Aus diesem Grund beginnen wir unsere Linie an einer Position von 3 auf der x-Achse und 3 auf der y-Achse. Wir können diesen Linienstartpunkt von (3,3) setzen, indem wir die Attribute x1="3" y1="3" verwenden.

Wir möchten, dass die Zeile 45px lang ist, also addieren wir 45 zu unserer Start-x-Position von 3, was uns 48 als den Wert ergibt, den wir für x2 festlegen möchten. Wir möchten, dass die Linie an derselben Position auf der horizontalen Achse endet, also setzen wir y2 auf 3, d. h. den gleichen Wert, den wir y1 gegeben haben. Wir fügen diesen (48,3) Zeilenendpunkt über die Attribute x2="48" y2="3" hinzu.

Der vollständige Code für die erste Zeile sollte so aussehen:

<line x1="3" y1="3" x2="48" y2="3"></line>

Überprüfen Sie Ihre Browservorschau und Sie sollten eine 45px lange schwarze Linie mit schönen abgerundeten Kappen sehen.

Jetzt können wir fortfahren und die nächsten drei Zeilen zu unserem Symbol hinzufügen. Wir wollen insgesamt vier Zeilen haben. Das erste und dritte sollten 45px lang sein, und das zweite und vierte sollten 62px lang sein. Wir wollen auch eine vertikale Lücke zwischen jedem von 16px.

Dies können wir mit folgendem Code erreichen:

<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>

Hinweis: Die y-Werte jeder Zeile erhöhen sich schrittweise um 16px, um die erforderliche vertikale Lücke zu erzeugen.

Schauen Sie sich Ihre Browservorschau noch einmal an und Sie sollten alle vier Zeilen sehen. Sie können das SVG auch direkt in diesem Stift bearbeiten:

Kommentieren Sie Ihre Symbole aus, während wir gehen

Mit diesem Code ist Ihr erstes Symbol bereits erstellt. Wir sind bereit, das nächste Symbol zu erstellen, und wir möchten es an der gleichen Position im Raster platzieren, aber im Moment ist das Symbol für die linke Ausrichtung im Weg. Kommentieren Sie daher vorerst nur den Code aus, um den Platz freizugeben. Wir werden später darauf zurückkommen und die Kommentierung aufheben, wenn wir unsere Symbole in wiederverwendbare Assets verwandeln.

Sie müssen für jedes Symbol dasselbe tun und es auskommentieren, nachdem Sie es erstellt haben. Aus diesem Grund ist es wahrscheinlich auch eine gute Idee, für jedes Symbol einen kleinen Hinweis über dem Code hinzuzufügen, damit Sie wissen, welches welches Symbol ist, wenn Sie später darauf zurückkommen.

3. Erstellen Sie ein „Right Caret“-Symbol

Verwenden wir für dieses Symbol die nächste Entwicklung des Elements <line>: die <polyline>. Wir werden es verwenden, um ein richtiges Pointing-Caret zu erstellen.

Das Element <polyline> hat nur ein Attribut: points. Hier verwenden Sie Zahlenpaare, um eine Reihe von Punkten zu setzen. Dazwischen werden automatisch Linien gezogen. Die Zahlenpaare werden einfach eine Zahl nach der anderen in das points-Attribut geschrieben. Eine Kommatrennung ist nicht erforderlich, kann aber optional eingefügt werden. Aus Gründen der Lesbarkeit möchten Sie möglicherweise auch jedes Wertepaar in einer eigenen Zeile in Ihrem Code platzieren.

Wir werden die Polylinie unserer rechten Einfügemarke an der gleichen Stelle beginnen, an der wir unser letztes Symbol gestartet haben, nämlich (3,3), um sicherzustellen, dass unser Strich und die Kappen nicht abgeschnitten werden. Wir möchten, dass sich unser zweiter Punkt nach rechts und um 25px nach unten bewegt, also setzen wir ihn auf (30,28). Unser dritter Punkt sollte vertikal am ersten Punkt ausgerichtet und um weitere 25px nach unten verschoben werden, sodass er auf (3,53) gesetzt wird.

Wir können diese Punkte wie folgt zum Punkteattribut unserer Polylinie hinzufügen:

<polyline points="
  3 3
  30 28
  3 53
"></polyline>

Wenn Sie einen prägnanteren Code wünschen, können Sie das obige auch so schreiben:

<polyline points="3 3, 30 28, 3 53"></polyline>

oder

<polyline points="3 3 30 28 3 53"></polyline>

Werfen Sie einen Blick auf Ihre Browservorschau und Sie sollten das richtige Caret-Symbol sehen: Ein weiteres Symbol ist fertig, einfach so!

Kommentieren Sie dieses Symbol noch einmal aus und geben Sie ihm eine kleine Notiz, damit Sie wissen, um welches es sich handelt, bevor Sie zum nächsten Symbol wechseln.

4. Erstellen Sie ein „Browser“-Symbol

Jetzt haben wir Linien nach unten, lassen Sie uns einige Formen erstellen, beginnend mit einem Rechteck (<rect>). Wir werden es in Verbindung mit ein paar <line> verwenden, um ein Browsersymbol zu erstellen.

Rechtecke und Quadrate können mit dem <rect>-Element erstellt werden, das vier Attribute hat, die Sie bereitstellen müssen:

x die obere linke Eckposition auf der x-Achse
y die obere linke Eckposition auf der y-Achse
width Breite der Form
height Höhe der Form

Hinweis: Sie können auch die Attribute rx und ry verwenden, um abgerundete Ecken zu erstellen, wenn Sie möchten.

Wir werden ein Rechteck erstellen, dessen obere linke Ecke in beide Richtungen um 3px versetzt ist, um ein Abschneiden des Strichs zu vermeiden, also verwenden wir die Attribute x="3" y="3". Wir möchten, dass es 80px breit und 60px hoch ist, daher verwenden wir auch die Attribute width="80" height="60".

Daher sollte unser vollständiger Rechteckcode sein:

<rect x="3" y="3" width="80" height="60"></rect>

Speichern Sie Ihren Code und sehen Sie sich Ihre Browservorschau an. Sie sollten dort ein hübsches kleines Rechteck sehen.

Jetzt müssen wir nur noch eine horizontale Linie oben und eine vertikale Linie oben links hinzufügen, wie Sie in der Abbildung am Anfang dieses Abschnitts sehen. Wir verwenden den gleichen Zeilenerstellungsprozess wie zuvor, und unser vollständiger Browsersymbolcode sollte so aussehen:

<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>

Nehmen Sie sich einen Moment Zeit, um sich die Koordinaten in den beiden Linienattributen anzusehen, und ändern Sie ihre Werte möglicherweise ein wenig, damit Sie sehen können, wie sie in diesem Symbol funktionieren.

5. Erstellen Sie ein "Alert"-Symbol

Nachdem wir die Erstellung von Rechtecken nun unter Kontrolle haben, versuchen wir es mit <ellipse>. Wir werden zwei davon zusammen mit einer <line> verwenden, um dieses Warnsymbol zu erstellen:

Wie Rechtecke benötigt auch das <ellipse>-Element vier Attribute, die sich jedoch etwas von denen von Rechtecken unterscheiden. Anstatt Breite und Höhe zu verwenden, legen wir einen horizontalen und vertikalen Radius fest. Und anstatt die obere linke Ecke der Form zu positionieren, positionieren wir ihre Mitte:

cx die Mittelposition auf der x-Achse. Denken Sie „cx für Zentrum x“.
cy die Mittelposition auf der y-Achse. Denken Sie „cy für Zentrum y“.
rx die Größe des Radius auf der x-Achse, d. h. die halbierte Höhe der Form. Denken Sie „rx für Radius x“.
ry die Größe des Radius auf der y-Achse, d. h. die Breite der Form halbiert. Denken Sie „ry für Radius y“.

Wir wollen einen perfekt runden Kreis, der 80px breit und 80px hoch ist, was bedeutet, dass sein Radius auf beiden Achsen 40px betragen muss. Wir setzen dies mit den Attributen rx="40" ry="40".

Wir möchten auch, dass der Kreis bündig mit den dunkelsten Linien in unserem Diagramm abschließt. Da unser Kreis 80px breit und hoch ist, würde sein Mittelpunkt bei 40px liegen. Wir müssen jedoch auch unseren 3px-Versatz berücksichtigen, um ein Clipping zu vermeiden, was bedeutet, dass der Mittelpunkt unseres Kreises auf beiden Achsen 43px betragen sollte. Wir setzen dies mit den Attributen cx="43" cy="43".

Wenn wir das alles zusammensetzen, erhalten wir diesen Code:

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

Überprüfen Sie Ihre Browservorschau und Sie sollten jetzt einen Kreis auf Ihrer Seite sehen.

Wir fügen jetzt einen zweiten Kreis hinzu, um den Punkt am unteren Rand des Ausrufezeichens zu erstellen. Wir werden dies auf die gleiche Weise erstellen, der einzige Unterschied besteht darin, dass wir einen Inline-Stil verwenden, um die Füllung auf Schwarz zu setzen:

<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>

Schließlich müssen wir nur noch eine Zeile hinzufügen, um den anderen Teil des Ausrufezeichens zu erstellen. Wir verwenden wieder die gleichen Techniken wie bei den anderen Linien, die wir bisher verwendet haben, mit dem einzigen Unterschied, dass wir einen Inline-Stil verwenden, um diese Strichbreite von 5px auf 8px zu erhöhen.

Der ausgefüllte Code für unser Warnsymbol lautet wie folgt:

6. Erstellen Sie ein "Play"-Symbol

Jetzt haben wir die relativ festen Formen von Rechtecken und Ellipsen im Griff und können unsere eigenen Formen mit dem <polygon>-Element rollen. Wir können damit jede gewünschte mehrseitige Form erstellen, von Achtecken bis hin zu Sternen. Wir halten die Dinge jedoch vorerst gerade und erstellen ein Dreieck. Wir kombinieren es mit einer <ellipse>, um ein Wiedergabesymbol zu erstellen:

Das <polygon>-Element ist fast identisch mit dem <polyline>-Element. Es hat auch nur ein Attribut, points, in dem Sie Wertepaare verwenden, um jeden Punkt festzulegen, aus dem die Form besteht. Der Unterschied besteht darin, dass eine Polylinie geöffnet bleibt, ein Polygon sich jedoch automatisch schließt.

Beginnen wir damit, den Kreis nach unten zu bringen, in dem unser Polygon sitzen wird. Wir verwenden genau die gleiche Ellipse wie in unserem Warnsymbol:

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

Jetzt erstellen wir unser Polygon. Wir platzieren drei Punkte, und zwischen diesen Punkten werden automatisch Linien erzeugt, um ein Dreieck zu erstellen. Die Punkte sind (35,23), (60,43) und (35,63). Der Code unseres Polygons lautet daher:

<polygon points="35 23, 60 43, 35 63" />

Und der Code unseres vollständigen Spielsymbols lautet:

7. Erstellen Sie ein "Download"-Symbol

Jetzt kommen wir zum potenziell komplexesten, aber gleichzeitig flexibelsten Mittel zur Erzeugung von SVG-Formen, und das ist das Element <path>. Das Erstellen eines Pfads ähnelt dem Erstellen eines Polygons, bei dem Sie Ihre Form Stück für Stück anordnen. Mit einem Pfad erstellen Sie jedoch jeden Punkt und jede Linie direkt ohne Automatisierung, und Sie haben auch die Möglichkeit, Kurven zwischen Punkten anstelle von geraden Linien zu erstellen.

Ein Pfad kann verwendet werden, um so ziemlich alles zu erstellen, aber ab einem bestimmten Komplexitätsgrad ist es immer noch besser, eine Vektordesign-Anwendung zu verwenden, als Handcodierung. Aus diesem Grund konzentrieren wir uns auf eine kleine Teilmenge der Pfadfunktionen und verwenden sie, um dieses Download-Symbol zu erstellen:

Technisch gesehen könnten Sie die obige Form mit einem Polygon erstellen, aber dieser Pfeil gibt uns eine gute Möglichkeit, die Funktionsweise des Pfadelements zu verstehen.

Wir verwenden nur eines der Attribute von <path>, und das ist d. Das d steht für „Daten“, und hier legen Sie alle Punkte und Linien Ihres Pfades fest. Innerhalb dieses Attributs werden Befehle zum Setzen der Punkte eines Pfads und zum Erstellen von Linien zwischen ihnen durch einzelne Buchstaben wie M oder L bereitgestellt, gefolgt von einem Satz von x- und / oder y-Koordinaten.

Es gibt mehrere dieser Befehle, aber um Ihnen eine Einführung in die Arbeit mit <path> zu geben, bleiben wir bei einigen, die realistischerweise bei der Handcodierung verwendet werden können. Sie sind wie folgt:

M steht für moveto. Es beginnt einen neuen Pfad an einer bestimmten Position, definiert mit x- und y-Werten. Stellen Sie sich vor, dies wäre, als würden Sie mit der Maus über einen Punkt auf Ihrer Leinwand fahren, um zu zeichnen. Das große M zeigt an, dass man sich zu einem absoluten Satz von Koordinaten bewegt. (Kleinbuchstaben m würden relative Koordinaten anzeigen).
L steht für lineto. Zeichnen Sie eine Linie von der aktuellen Position zu einer neuen Position. Das große L zeigt an, dass man sich zu einem absoluten Satz von Koordinaten bewegt. (Kleinbuchstabe l würde relative Koordinaten anzeigen).
Z steht für Nahpfad. Es wandelt den Pfad in eine geschlossene Form um, indem eine gerade Linie zwischen dem aktuellen Punkt und dem ersten im Pfad erstellten Punkt gezeichnet wird.

Sie sollten diese drei Befehle (und das Symbol, das wir mit ihnen erstellen) auf jeden Fall als Einführung in das <path>-Element ansehen. Um das Beste daraus zu machen, sollten Sie sich mit allen verfügbaren Befehlen vertraut machen.

Codieren Sie Ihr Download-Symbol

Um Ihren Download-Symbolpfad zu codieren, empfehle ich, zuerst das leere Pfadelement hinzuzufügen:

<path d="

"></path>

Fügen Sie von hier aus jeden Befehl nacheinander hinzu, speichern und sehen Sie den Fortschritt der Form, damit Sie sehen, wie sie erstellt wird. Ich empfehle auch, jeden Befehl aus Gründen der Lesbarkeit in eine eigene Zeile zu setzen.

Zuerst wollen wir zu (18,3) gehen, dem Punkt, an dem unser Pfeil beginnen soll. Dazu fügen wir dem d-Attribut unseres Pfads den Befehl M 18 3 hinzu.
Als nächstes möchten wir den L-Befehl verwenden, um eine Linie zu erstellen, die vom Startpunkt unseres Pfads entlang der x-Achse für 28px zeichnet. Fügen wir dazu unseren zweiten Befehl hinzu: L 46 3. Überprüfen Sie Ihre Vorschau und Sie sollten eine kleine horizontale Linie sehen.
Ziehen wir nun eine Linie für 37px gerade nach unten, indem wir L 46 40 hinzufügen.
Dann gerade nach rechts um 15px mit L 61 40
Als nächstes müssen wir damit beginnen, den Pfeilpunkt zu erstellen. Wir müssen eine Linie diagonal nach unten und nach links ziehen. Das machen wir mit L 32 68.
Und dann lassen wir eine Linie schräg nach oben und links mit L 3 40 gehen.
Jetzt beenden wir unsere Pfeilspitze, indem wir mit L 18 40 wieder ein Stück nach rechts ziehen.
Um unsere Form zu schließen, müssen wir keinen Punkt angeben, zu dem eine Linie gezogen werden soll. Alles, was wir tun müssen, ist den Z-Befehl hinzuzufügen, der unsere Form automatisch für uns schließt.

Ihr endgültiger Pfeilpfadcode sollte wie folgt aussehen:

<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>

Weitere Informationen zum Arbeiten mit <path> finden Sie in den Referenzen am Ende der Seite.

8. `<defs>` Element hinzufügen

Wir sind alle mit der Codierung unserer sechs Symbole fertig, sodass wir sie jetzt für die Platzierung und Wiederverwendung in unserem SVG vorbereiten können.

Um dies zu tun, werden wir den Code für alle unsere sechs (derzeit auskommentierten) Symbole mit den Tags <defs></defs> umschließen:

<defs>
<!-- All the icons you created so far go in here -->
</defs>

Dies teilt dem System mit, dass alle von uns erstellten Symbole standardmäßig ausgeblendet werden sollen, bis wir sie explizit verwenden.

Sie können jetzt jedes Ihrer Symbole auskommentieren und sie werden nicht auf der Seite angezeigt.

9. Erstellen Sie Gruppen mit `<g>`

Es gibt zwei Möglichkeiten, unsere Symbole einsatzbereit zu machen: indem wir sie in Gruppen oder in Symbole umwandeln. Wir werden die erste Hälfte der Symbole in Gruppen und die zweite Hälfte in Symbole umwandeln, damit wir den Unterschied veranschaulichen können.

Um eines unserer Icons in eine Gruppe umzuwandeln, müssen wir es nur mit <g></g>-Tags umschließen. Um diese Gruppe nutzbar zu machen, müssen wir ihr auch eine eindeutige ID zuweisen.

Zum Beispiel:

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

Umhüllen Sie jedes Ihrer ersten drei Symbole mit <g></g>-Tags und fügen Sie eindeutige IDs hinzu, etwa so:

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>

<g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

10. Platzieren von Gruppen mit `<use>`

Wir haben jetzt drei als Gruppen definierte Symbole in unserem <defs>-Element, sodass wir sie in unserem SVG verwenden können. Um dies zu erreichen, müssen wir nur ein <use>-Element hinzufügen (achten Sie darauf, dass es nach und außerhalb des <defs>-Elements hinzugefügt wird) und ein href-Attribut festzulegen, um die ID des gewünschten Symbols zu erreichen.

Um beispielsweise das Symbol für die linke Ausrichtung zu verwenden, fügen Sie diesen Code hinzu:

<use href="#leftalign"></use>

Um das Symbol an einer bestimmten Stelle zu positionieren, fügen Sie x- und y-Attribute hinzu:

<use href="#leftalign" x="100" y="100"></use>

Der Code, um alle drei Symbole hinzuzufügen und sie voneinander zu trennen, würde ungefähr so aussehen:

<use href="#leftalign" x="100" y="100"></use>

<use href="#rightcaret" x="300" y="100"></use>

<use href="#browser" x="500" y="100"></use>

Überprüfen Sie Ihren Browser und Sie sollten alle drei Ihrer ersten Symbole sehen:

11. Erstellen Sie Symbole mit `<symbol>`

Anstatt Gruppen zum Definieren Ihrer Symbole zu verwenden, können Sie auch Symbole verwenden. Symbole sind fast identisch mit Gruppen, Sie erhalten jedoch Zugriff auf zusätzliche Einstellungen, um die Ansichtsbox und das Seitenverhältnis zu steuern.

Dies kann sehr nützlich sein, wenn Sie beispielsweise die von uns erstellten Symbole zentrieren möchten. Wir wandeln die verbleibenden drei Symbole in Symbole um und passen sie dann so an, dass sie vertikal einen 100px hohen Raum ausfüllen und horizontal in diesem Raum zentriert sind.

Wir erstellen unsere Symbole auf die gleiche Weise wie unsere Gruppen, nur dass wir den Code unserer letzten drei Symbole in <symbol></symbol>-Tags packen. Außerdem müssen wir jedem eine eindeutige ID hinzufügen.

Was wir jedoch auch hinzufügen werden, ist ein viewBox-Attribut. Dadurch können wir definieren, was der sichtbare Teil jedes Symbols sein soll. Wenn der Browser Zugriff auf diese Informationen hat, kann er Symbole richtig skalieren und ausrichten.

Wir müssen unserem viewBox-Attribut vier Werte zuweisen. Die ersten beiden definieren den oberen linken Punkt unseres Symbols, und der dritte und vierte definieren seine Breite bzw. Höhe.

Beginnend mit unserem „Alarm“-Symbol sind seine Breite und Höhe beide 86px, also setzen wir seine viewBox auf 0 0 86 86 wie folgt:

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

Das „Play“-Symbol ist ebenfalls 86px breit und hoch, und das „Download“-Symbol ist 64px breit und 71px hoch. Der entsprechende Code für unsere Symbole sollte daher lauten:

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

12. Platziere Symbole mit `<use>`

Wir können unsere Symbolsymbole jetzt genauso verwenden wie unsere Gruppen. Wir werden jedoch auch jedes mit Breiten- und Höhenattributen versehen, die auf 100 gesetzt sind:

<use href="#alert" x="100" y="200" width="100" height="100"></use>

<use href="#play" x="300" y="200" width="100" height="100"></use>

<use href="#download" x="500" y="200" width="100" height="100"></use>

Sie werden sehen, dass jedes Ihrer symbolbasierten Symbole seinen 100 x 100 Pixel großen Raum sauber ausfüllt und ausrichtet:

Versuchen Sie, width- und height-Attribute auf die <use>-Elemente eines Ihrer gruppenbasierten Symbole anzuwenden. Sie werden feststellen, dass sich nichts ändert. Dies liegt daran, dass der Browser auf viewBox-Werte angewiesen ist (die eine Gruppe nicht haben kann), um zu wissen, wie die Symbole skaliert werden.

Einpacken

So sollte Ihr fertiger Code aussehen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style>
  html, body {
    height: 100%;
    width: 100%;
    background: #e9e9e9;
  }
  body {
    margin: 0;
    text-align: center;
  }
  .grid {
    width: 750px;
    height: 500px;
    margin: 0 auto;
    padding-top: 100px;
    padding-left: 100px;
    background-image: url('grid.png');
    position: relative;
  }
  .grid::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    width: 750px;
    height: 600px;
  }
  .grid::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 850px;
    height: 500px;
  }
  svg {
    stroke: rgb(0, 0, 0);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  </style>
</head>
<body>

<div class="grid">

<svg width="750" height="500">

<defs>

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>

<g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

</defs>

<use href="#leftalign" x="100" y="100"></use>

<use href="#rightcaret" x="300" y="100"></use>

<use href="#browser" x="500" y="100"></use>

<use href="#alert" x="100" y="200" width="100" height="100"></use>

<use href="#play" x="300" y="200" width="100" height="100"></use>

<use href="#download" x="500" y="200" width="100" height="100"></use>

</svg>

</div>

</body>
</html>

Das deckt die Grundlagen der Handcodierung von SVG ab! Fassen wir zusammen, was wir gelernt haben:

Richten Sie Ihr <svg>-Element ein, um Ihre gesamte Grafik zu umschließen.
Verwenden Sie <line> und <polyline>, um Linien zu erstellen.
Verwenden Sie <rect>, <ellipse> und <polygon>, um geschlossene Formen zu erstellen.
Verwenden Sie <path>, um alles zu erstellen, was Sie möchten.
Gruppieren Sie Formen mit dem Element <g>.
Für gruppenähnliches Verhalten mit zusätzlichen Funktionen verwenden Sie <symbol>
Verwenden Sie das Element <defs>, um wiederverwendbare Symbole und Gruppen zu definieren.
Platzieren Sie Ihre definierten wiederverwendbaren Symbole und Gruppen mit dem Element <use>.

Wir haben in diesem Tutorial einige solide Grundlagen gelernt, aber es gibt noch viel mehr, was Sie mit SVG tun können, also hören Sie hier nicht auf, graben Sie weiter und entdecken Sie mehr von den großartigen Dingen, die erreicht werden können!

In der Zwischenzeit fühlen Sie sich hoffentlich nicht mehr vollständig von Vektordesign-Apps für Ihre SVG-Erstellung abhängig und können selbstbewusst einige Ihrer eigenen Grafiken von Hand erstellen. Für komplexere Grafiken sind Design-Apps immer noch der richtige Weg, aber Sie können mit den Ihnen zur Verfügung stehenden Bausteinen eine Menge tun, indem Sie die Geschwindigkeit und Kontrolle der Handcodierung nutzen.