So zeichnen Sie eine Schneeflocke in SVG

Dieses Tutorial zeigt, wie Sie eine Schneeflocke in SVG zeichnen: Sie erstellen einen einzelnen Zweig, verwenden ihn mit <use> mehrfach, drehen die Kopien um den Mittelpunkt und fügen optional eine SVG-Animation hinzu. Dasselbe Muster eignet sich für Schneeflocken-Icons, Winterhintergründe, dekorative Loader, Grußkarten und wiederverwendbare Vektorgrafiken.

Quick Answer: Zeichnen Sie einen Schneeflockenzweig als <path>, legen Sie ihn in <defs> ab, verwenden Sie ihn sechsmal mit <use> wieder und drehen Sie jede Kopie mit transform="rotate(angle cx cy)" um den Mittelpunkt.

In diesem Artikel lernen Sie, wie Sie:

ein SVG-viewBox für eine skalierbare Schneeflocke festlegen;
einen Zweig mit path commands zeichnen;
den Zweig mit <defs> und <use> wiederverwenden;
Zweige um den Mittelpunkt der Schneeflocke drehen;
eine zentrale Dekoration und optional eine <animateTransform>-Rotation hinzufügen;
eine SVG-Schneeflocke für Barrierefreiheit, SEO und Wiederverwendung optimieren.

Warum SVG ideal für Schneeflocken ist

SVG ist ein gutes Format für Schneeflockenzeichnungen, weil die Grafik geometrisch, skalierbar, editierbar und meist klein ist. Eine Schneeflocke kann aus wiederholten Linien und transforms aufgebaut werden, statt viele getrennte path-Kopien zu speichern.

Drei unterschiedlich gestaltete Schneeflocken rotieren um ihre eigene Achse.

Schneeflocken mit ihrer sechsfachen Symmetrie und klaren Linien zeigen sehr gut, wofür SVG stark ist:

Skalierbar – Schneeflocken bleiben in jeder Größe scharf, vom kleinen Icon bis zum großen Hintergrund. Sie eignen sich für Icons, Logos und Animationen.
Kleine Dateigröße – SVG-Code ist normalerweise kleiner als Rasterbilder.
SEO-Vorteile – Suchmaschinen können SVG-Inhalte lesen und indexieren.
CSS styles – Farbe, Größe und stroke width lassen sich einfach ändern. Schneeflocken können leicht animiert und dynamisch gestylt werden.

Grundstruktur einer Schneeflocke

Eine einfache SVG-Schneeflocke kann aus sechs Zweigen aufgebaut werden, die um einen gemeinsamen Mittelpunkt gedreht sind. Ein voller Kreis hat 360 Grad, also liegen sechs gleichmäßige Zweige jeweils 60 Grad auseinander. Der Grundansatz ist:

Einen einzelnen Zweig erstellen.
Den ursprünglichen Zweig fünfmal um jeweils 60 Grad um den Mittelpunkt drehen, sodass sechs Zweige entstehen.
Dekorative Elemente hinzufügen.

Dieses Schneeflockenbeispiel verwendet SVG paths, transformations, wiederverwendbare Elemente, fills, strokes und viewBox. Diese verwandten Tutorial-Artikel erklären die zugrunde liegenden Konzepte:

SVG-Koordinatensysteme und Einheiten erklärt SVG canvas, viewport, units und coordinate system.
SVG-Formen zeigt, wie Sie grundlegende Formen erstellen und einfach stylen.
SVG Path Data erklärt, wie paths Konturen aus Linien-, Bogen- und Kurvenbefehlen zeichnen.
Grundlegende SVG-Transformationen behandelt rotation, scaling, translation und skewing mit dem transform-Attribut.
Füllung und Kontur in SVG erklärt stroke color, width, opacity, dash patterns und fill-Verhalten.

So zeichnen Sie eine SVG-Schneeflocke

Erstellen Sie ein <svg>-Element mit einem quadratischen viewBox, zum Beispiel viewBox="0 0 300 300".
Wählen Sie den Mittelpunkt der Schneeflocke. In einem 300x300-viewBox liegt er bei (150, 150).
Zeichnen Sie einen Zweig als <path> und verwenden Sie fill="none", wenn eine Liniengrafik entstehen soll.
Legen Sie den Zweig-path in <defs> ab, damit er wiederverwendet werden kann, ohne dass die Definition selbst gerendert wird.
Verwenden Sie <use>, um den Zweig sechsmal zu platzieren, und drehen Sie jede Kopie um 60 Grad um den Mittelpunkt.
Ergänzen Sie Dekoration, Metadaten und optional <animateTransform>, wenn sich die Schneeflocke drehen soll.

Schritt 1. SVG-Dokument erstellen

Jedes SVG-Bild beginnt mit dem <svg>-Element. Es definiert den Zeichenbereich und das Koordinatensystem, das die Schneeflocke verwendet.

1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2  <!-- Der Code für Ihre Schneeflocke steht hier -->
3</svg>

Die Attribute haben folgende Aufgaben:

width und height legen die Anzeigegröße des SVG-Bildes auf der Seite fest, hier 300x300 Pixel. Diese Werte bestimmen, wie groß die Schneeflocke im Browser erscheint.
viewBox="0 0 300 300" definiert das Koordinatensystem innerhalb des SVG-Bildes. Die ersten beiden Zahlen (0 0) stehen für die obere linke Ecke des canvas, die nächsten beiden (300 300) für Breite und Höhe in Koordinateneinheiten. Mit viewBox kann das Bild sauber skaliert werden, ohne an Schärfe zu verlieren.
xmlns="http://www.w3.org/2000/svg" sagt dem Browser, dass es sich um ein SVG-Dokument handelt, und sorgt für korrektes Rendering.

Tipp: Definieren Sie immer ein viewBox. Dadurch skaliert die Schneeflocke sauber bei unterschiedlichen Anzeigegrößen. Weitere Details finden Sie unter SVG viewBox.

Schritt 2. Mit einem Basiszweig beginnen

Wählen Sie zuerst den Mittelpunkt der Schneeflocke. In einem 300x300-viewBox liegt er bei (150, 150). Statt alle sechs Zweige manuell zu zeichnen, zeichnen Sie einen Zweig und verwenden ihn wieder. Das Beispiel nutzt ein <path>-Element, um Linien zu zeichnen:

1<path id="b1" stroke="#03b6fd" stroke-linecap="round" stroke-width="10" fill="none" d="
2  M 50,50 L 150,150
3  M 50,80 L 80,80 L 80,50
4  M 50,100 L 100,100 L 100,50
5  M 80,120 L 120,120 L 120,80
6  M 110,140 L 140,140 L 140,110" />

Der path funktioniert so:

Jeder M command im d-Attribut bewegt den Stift zu einem Startpunkt.
Jeder L command zeichnet eine gerade Linie zur nächsten Koordinate.
Das stroke-Attribut legt die Farbe des <path>-Elements als eisiges Blau fest.
stroke-linecap erzeugt weiche, abgerundete Linienenden.

An diesem Punkt enthält das SVG einen Zweig, also ein Sechstel der endgültigen Schneeflocke. Sie können den Zweigstil ändern, indem Sie path-Attribute wie stroke, stroke-width, stroke-linecap, stroke-dasharray und fill bearbeiten.

Die folgende Abbildung zeigt Schneeflockenzweige mit unterschiedlichen styles für das <path>-Element.

Vier unterschiedliche Stile eines Schneeflockenzweigs, mit a bis d beschriftet

a) Das Attribut stroke-linecap="round", das für abgerundete Linienenden sorgt, wird nicht verwendet.
b) Das Attribut stroke-linecap="round" wird verwendet.
c) Statt der transparenten Füllung fill="none" wird die Füllfarbe fill="#03b6fd" verwendet.
d) Das Attribut stroke-dasharray="2 8" verändert das Aussehen des Zweigs.

Schritt 3. Den Zweig drehen und die ganze Schneeflocke aufbauen

Verwenden Sie den Zweig mit dem <use>-Element wieder, statt dieselben path data sechsmal zu kopieren. Ein rotation transform platziert jede Kopie um den Mittelpunkt (150, 150):

1<g id="snowflake1">
2  <use href="#b1" />
3  <use href="#b1" transform="rotate(60 150 150)" />
4  <use href="#b1" transform="rotate(120 150 150)" />
5  <use href="#b1" transform="rotate(180 150 150)" />
6  <use href="#b1" transform="rotate(240 150 150)" />
7  <use href="#b1" transform="rotate(300 150 150)" />
8</g>

Das Ergebnis sind sechs identische Zweige, die um denselben Mittelpunkt gedreht sind:

Vier unterschiedliche Stile einer vollständigen Schneeflocke, mit a bis d beschriftet

Schritt 4. Weitere Dekoration hinzufügen

Um das Icon abzuschließen, fügen Sie einen Kreis hinzu, der dem Mittelpunkt visuelles Gewicht gibt:

1<circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3"/>

cx und cy legen den Kreismittelpunkt fest, hier genau in der Mitte des 300x300-viewBox.
r ist der Radius.
fill und stroke legen die Farben fest.

Jetzt ist die Schneeflocke eine vollständige Vektorgrafik, aufgebaut aus einem wiederverwendbaren Zweig und einer zentralen Dekoration.

Schritt 5. Schneeflocke animieren

Um die Schneeflocke zu animieren, können Sie eine Rotationsanimation direkt in die SVG-Datei einfügen. Dafür verwenden Sie das <animateTransform>-Element. Die Animation bleibt dadurch Teil der SVG-Datei selbst und ist nicht von externem CSS abhängig. Platzieren Sie <animateTransform> direkt in der <g>-Gruppe, die alle Teile der Schneeflocke enthält. So rotiert die gesamte Gruppe, also Zweige und Dekoration, um den Mittelpunkt (150, 150).

1<g id="snowflake1">
2  <!-- Rotationsanimation -->
3  <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="30s" repeatCount="indefinite"/>
4
5  <!-- Schneeflockenzweige -->
6  <use href="#b1" />
7  <use href="#b1" transform="rotate(60 150 150)" />
8  ...
9</g>

type="rotate" legt den Transformationstyp als Rotation fest.
from und to geben die Rotationswinkel und den Mittelpunkt der Rotation an, also die x y-Koordinaten.
dur="30s" legt die Dauer einer vollständigen Umdrehung fest.
repeatCount="indefinite" lässt die Animation dauerhaft laufen.

Der Vorteil dieses Ansatzes ist, dass die Animation vollständig in der SVG-Datei eingebettet bleibt. Dadurch ist sie unabhängig von externen styles und scripts und funktioniert in modernen Browsern auch dann konsistent, wenn das SVG als <img> oder Hintergrundbild verwendet wird. Der Effekt bleibt portabel und in sich geschlossen. Allerdings ist diese Methode weniger flexibel als CSS-Animation, weil jedes <animateTransform>-Element nur eine einzelne transform steuert. Komplexere Effekte wie scaling oder fading benötigen zusätzliche Elemente.

Schneeflocken als Vektorgrafiken eignen sich gut für Winter-Websites, festliche Designs und interaktive Elemente, von animierten Loadern und wiederholten Hintergründen bis zu skalierbaren Grafiken für digitale Karten und Druckmaterialien. Das SVG-Bild der Schneeflocke und die vollständige SVG-Datei finden Sie hier: animated-snowflake.svg.

Blaue Schneeflocke rotiert um ihren Mittelpunkt

SVG-Schneeflocken für SEO und Barrierefreiheit optimieren

So verbessern Sie die SEO-Wirkung und Nutzbarkeit von SVG-Schneeflocken auf Ihrer Website:

Fügen Sie title- und desc-Elemente hinzu:

1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2  <title>Dekorative Winter-Schneeflocke</title>
3  <desc>Sechszackige Schneeflocke als Winterdekoration</desc>
4  <!-- snowflake code -->
5</svg>

Verwenden Sie semantische Dateinamen, zum Beispiel winter-snowflake-icon.svg statt image1.svg.
Setzen Sie Alt-Text beim Einbetten: <img src="winter-snowflake-icon.svg" alt="Blaue kristalline Winter-Schneeflocke">.
Optimieren Sie die Dateigröße, indem Sie unnötige Nachkommastellen und Leerzeichen entfernen.

Der vollständige Code für die SVG-Schneeflocke (animated-snowflake.svg) sieht so aus:

 1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
 2  <title>Dekorative Winter-Schneeflocke</title>
 3  <desc>Sechszackige Schneeflocke als Winterdekoration</desc>
 4
 5  <!-- Schneeflockenzweig definieren (versteckt, nur als Referenz) -->
 6  <defs>
 7    <path id="b1" stroke="#03b6fd" stroke-linecap="round" stroke-width="10" fill="none" d="
 8      M 50,50 L 150,150
 9      M 50,80 L 80,80 L 80,50
10      M 50,100 L 100,100 L 100,50
11      M 80,120 L 120,120 L 120,80
12      M 110,140 L 140,140 L 140,110" />
13  </defs>
14
15  <!-- Rotierende Schneeflockengruppe -->
16  <g id="snowflake1">
17    <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="30s" repeatCount="indefinite"/>
18    <use href="#b1" />
19    <use href="#b1" transform="rotate(60 150 150)" />
20    <use href="#b1" transform="rotate(120 150 150)" />
21    <use href="#b1" transform="rotate(180 150 150)" />
22    <use href="#b1" transform="rotate(240 150 150)" />
23    <use href="#b1" transform="rotate(300 150 150)" />
24    <!-- Zentrale Dekoration -->
25    <circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3" />
26  </g>
27</svg>

Häufige Fehler und Korrekturen

Problem	Ursache	Lösung
Schneeflockenzweige drehen sich um den falschen Punkt	`rotate(angle)` wird ohne Mittelpunkt verwendet und nutzt deshalb standardmäßig `(0, 0)` statt den Mittelpunkt der Schneeflocke	Geben Sie immer alle drei Werte an: `transform="rotate(60 150 150)"`, wobei `150 150` der Mittelpunkt des `viewBox` ist.
Der in `<defs>` gedachte Zweig wird doppelt gerendert	`<path id="b1">` steht direkt im SVG-body und wird zusätzlich über `<use>` wiederverwendet	Legen Sie die Zweigdefinition in `<defs>...</defs>` ab. Elemente in `<defs>` werden erst gerendert, wenn sie mit `<use href="#b1">` referenziert werden.
`<use href="#b1">` zeigt nichts an	Das `href`-Attribut wird in älteren SVG-1.1-Kontexten nicht unterstützt, etwa in IE oder einigen alten Android-Browsern	Fügen Sie für breitere Kompatibilität zusätzlich `xlink:href="#b1"` hinzu: `<use href="#b1" xlink:href="#b1" />`.
Der mittlere Kreis liegt hinter den Zweigen	Das `<circle>`-Element steht in der Dokumentreihenfolge vor den `<use>`-Elementen	Verschieben Sie `<circle>` nach allen `<use>`-Elementen innerhalb der `<g>`-Gruppe. SVG rendert in Dokumentreihenfolge, das letzte Element liegt oben.
`fill` ist standardmäßig schwarz und macht den Zweig massiv	`fill="none"` fehlt im `<path>`-Element	Setzen Sie `fill="none"` explizit auf dem Zweig-`<path>`, damit nur die stroke-Linien gerendert werden: `<path ... fill="none" stroke="#03b6fd" .../>`.
Die Animation funktioniert nicht, wenn SVG über `<img>` verwendet wird	CSS-`animation`-Regeln aus einem externen Stylesheet wirken nicht auf SVG-Dateien, die als `<img>` geladen werden	Verwenden Sie das eingebaute `<animateTransform>`-Element innerhalb der SVG-Datei. Es funktioniert unabhängig davon, wie das SVG eingebettet wird.
Die Animation rotiert um `(0, 0)` statt um den Schneeflockenmittelpunkt	`<animateTransform>` nutzt `from="0"` und `to="360"` ohne Mittelpunkt	Geben Sie den Mittelpunkt an: `from="0 150 150"` und `to="360 150 150"`, damit die Schneeflocke an Ort und Stelle rotiert.
Das SVG wird von Suchmaschinen nicht gut gelesen oder indexiert	Es gibt keine `<title>`- oder `<desc>`-Elemente, und die Datei hat einen generischen Namen wie `image1.svg`	Fügen Sie `<title>` und `<desc>` in `<svg>` ein, verwenden Sie einen beschreibenden Dateinamen wie `winter-snowflake-icon.svg` und setzen Sie Alt-Text beim Einbetten über `<img>`.

Schnelle Rezepte

1. Schneeflocke mit acht Zweigen statt sechs

Drehen Sie in 45-Grad-Schritten statt in 60-Grad-Schritten, um eine achtzackige Schneeflocke zu erstellen:

 1<g>
 2  <use href="#b1" />
 3  <use href="#b1" transform="rotate(45 150 150)" />
 4  <use href="#b1" transform="rotate(90 150 150)" />
 5  <use href="#b1" transform="rotate(135 150 150)" />
 6  <use href="#b1" transform="rotate(180 150 150)" />
 7  <use href="#b1" transform="rotate(225 150 150)" />
 8  <use href="#b1" transform="rotate(270 150 150)" />
 9  <use href="#b1" transform="rotate(315 150 150)" />
10</g>

2. Innere Ebene gegenläufig drehen

Fügen Sie eine zweite, kleinere Zweiggruppe hinzu, die in die entgegengesetzte Richtung rotiert. So entsteht ein mehrschichtiger Effekt:

 1<g>
 2  <animateTransform attributeName="transform" type="rotate"
 3    from="0 150 150" to="360 150 150"
 4    dur="30s" repeatCount="indefinite" />
 5  <use href="#b1" />
 6  <use href="#b1" transform="rotate(60 150 150)" />
 7  <use href="#b1" transform="rotate(120 150 150)" />
 8  <use href="#b1" transform="rotate(180 150 150)" />
 9  <use href="#b1" transform="rotate(240 150 150)" />
10  <use href="#b1" transform="rotate(300 150 150)" />
11</g>
12<g>
13  <animateTransform attributeName="transform" type="rotate"
14    from="360 150 150" to="0 150 150"
15    dur="20s" repeatCount="indefinite" />
16  <use href="#b2" />
17  <use href="#b2" transform="rotate(60 150 150)" />
18  <use href="#b2" transform="rotate(120 150 150)" />
19  <use href="#b2" transform="rotate(180 150 150)" />
20  <use href="#b2" transform="rotate(240 150 150)" />
21  <use href="#b2" transform="rotate(300 150 150)" />
22</g>

Definieren Sie #b2 als kürzeren, dünneren Zweig in <defs>, damit sich die beiden Ebenen visuell unterscheiden.

3. Zweigposition mit <g transform="rotate(30 150 150)"> verschieben

Drehen Sie die gesamte Schneeflockengruppe um 30 Grad, damit die Zweige zwischen den Achsen liegen. Das ist nützlich, wenn mehrere Schneeflocken gekachelt werden und nicht zu stark ausgerichtet wirken sollen:

1<g transform="rotate(30 150 150)">
2  <use href="#b1" />
3  <use href="#b1" transform="rotate(60 150 150)" />
4  <!-- weitere Zweige -->
5</g>

4. Schneeflocke mit <symbol> auf der Seite wiederverwenden

Definieren Sie die Schneeflocke einmal als <symbol> und platzieren Sie sie anschließend an beliebigen Positionen und in unterschiedlichen Größen, ohne den Code zu wiederholen:

 1<defs>
 2  <symbol id="snowflake" viewBox="0 0 300 300">
 3    <use href="#b1" />
 4    <use href="#b1" transform="rotate(60 150 150)" />
 5    <use href="#b1" transform="rotate(120 150 150)" />
 6    <use href="#b1" transform="rotate(180 150 150)" />
 7    <use href="#b1" transform="rotate(240 150 150)" />
 8    <use href="#b1" transform="rotate(300 150 150)" />
 9    <circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3" />
10  </symbol>
11</defs>
12
13<!-- An verschiedenen Positionen und Größen platzieren -->
14<use href="#snowflake" x="0"   y="0"   width="80"  height="80" />
15<use href="#snowflake" x="100" y="50"  width="120" height="120" />
16<use href="#snowflake" x="220" y="10"  width="60"  height="60" />

Kopieren Sie das benötigte Snippet und passen Sie Koordinaten, Farben oder Timing an.

FAQ – SVG-Schneeflocken

Welche SVG-Elemente werden für eine Schneeflocke verwendet?

Eine kompakte Schneeflocke nutzt meist <path> für einen Zweig, <defs> für die wiederverwendbare Zweigdefinition, <use> für wiederholte Zweige, transform="rotate(...)" für Symmetrie und optional <circle> oder <animateTransform> für Dekoration und Bewegung.

Warum sollte ich `` und `` für eine Schneeflocke verwenden?

<defs> und <use> halten das SVG kleiner und leichter editierbar. Sie definieren einen Zweig einmal und verwenden ihn mit unterschiedlichen Rotationswinkeln wieder, statt dieselben path data mehrfach zu kopieren.

Kann ich diese SVG-Schneeflocke als Icon oder Hintergrund verwenden?

Ja. Behalten Sie das viewBox bei, verwenden Sie einen beschreibenden Dateinamen und betten Sie das SVG mit aussagekräftigem Alt-Text ein, wenn Sie <img> verwenden. Für Hintergründe oder dekorative Grafiken sollten die paths einfach bleiben und schwere Filter vermieden werden.

Kann ich eine SVG-Schneeflocke ohne CSS animieren?

Ja. Fügen Sie <animateTransform> innerhalb der Schneeflockengruppe hinzu, um das SVG in sich geschlossen rotieren zu lassen. Das ist nützlich, wenn die Animation auch dann funktionieren soll, wenn das SVG als Bilddatei eingebettet wird.

Wichtige Erkenntnisse

Halten Sie den Code sauber und wiederverwendbar, wenn Sie Schneeflocken in einer SVG-Datei erstellen. Definieren Sie wiederholte Elemente wie Zweige mit <defs> und <use>, um die Dateigröße zu verringern und spätere Änderungen zu vereinfachen.
Vergeben Sie id-Werte, etwa <path id="b1"> oder <g id="snowflake1">, wenn Sie bestimmte Teile der SVG-Datei referenzieren oder animieren möchten.
Definieren Sie immer ein viewBox, damit die Schneeflocke auf unterschiedlichen Bildschirmen und Auflösungen proportional skaliert.
Denken Sie daran: Echte Schneeflocken sind nie identisch. Experimentieren Sie ruhig mit asymmetrischen Details, solange die grundlegende sechsseitige Struktur erhalten bleibt.
Optimieren Sie die Performance. Verwenden Sie einfache paths und vermeiden Sie unnötige Punkte oder komplexe Filter. Leichte SVG-Bilder rendern schneller, und Animationen laufen flüssiger.