Как нарисовать снежинку в SVG

В этом учебнике показано, как нарисовать снежинку в SVG: создать одну ветвь, переиспользовать ее через <use>, повернуть копии вокруг центра и при необходимости добавить SVG-анимацию. Тот же подход полезен для иконок снежинок, зимних фонов, декоративных загрузчиков, поздравительных открыток и переиспользуемых векторных ресурсов.

Краткий ответ: нарисуйте одну ветвь снежинки как <path>, поместите ее в <defs>, переиспользуйте шесть раз через <use> и поверните каждую копию вокруг центра с помощью transform="rotate(angle cx cy)".

В этой статье вы узнаете, как:

задать SVG viewBox для масштабируемого рисунка снежинки;
нарисовать одну ветвь с помощью команд path;
переиспользовать ветвь через <defs> и <use>;
поворачивать ветви вокруг центра снежинки;
добавить центральный декоративный элемент и необязательную анимацию <animateTransform>;
оптимизировать SVG-снежинку для доступности, SEO и повторного использования.

Почему SVG идеально подходит для снежинок

SVG хорошо подходит для рисунков снежинок, потому что такая графика геометрична, масштабируема, редактируема и обычно занимает мало места. Снежинку можно построить из повторяющихся линий и трансформаций, не копируя множество отдельных path-элементов.

Три снежинки разных стилей вращаются вокруг своей оси.

Снежинки с шестилучевой симметрией и чистыми линиями хорошо показывают сильные стороны SVG:

Масштабируемость – снежинки остаются четкими в любом размере, от маленьких иконок до больших фонов. Они подходят для иконок, логотипов и анимаций.
Небольшой размер файла – SVG-код обычно меньше, чем растровое изображение.
Преимущества для SEO – поисковые системы могут читать и индексировать SVG-содержимое.
CSS-стили – цвет, размер и ширину обводки легко менять. Снежинки удобно анимировать и динамически стилизовать.

Базовая структура снежинки

Простую SVG-снежинку можно построить из шести ветвей, повернутых вокруг одного центра. Полный оборот равен 360 градусам, поэтому шесть одинаковых ветвей располагаются с шагом 60 градусов. Базовый подход:

Создать одну ветвь.
Повернуть исходную ветвь вокруг центра на 60 градусов 5 раз, чтобы получить шесть ветвей.
Добавить декоративные элементы.

В этом примере снежинки используются SVG path-элементы, трансформации, переиспользуемые элементы, заливки, обводки и viewBox. Эти статьи учебника объясняют связанные базовые понятия:

Системы координат и единицы SVG объясняет canvas, viewport, единицы и систему координат SVG.
SVG-фигуры показывает, как создавать базовые фигуры и применять простые стили.
Данные path в SVG объясняет, как path-элементы рисуют контуры из команд линий, дуг и кривых.
Базовые SVG-трансформации рассматривает вращение, масштабирование, перемещение и наклон через атрибут transform.
Заливка и обводка в SVG объясняет цвет обводки, ширину, прозрачность, пунктирные паттерны и поведение fill.

Как нарисовать SVG-снежинку

Создайте элемент <svg> с квадратным viewBox, например viewBox="0 0 300 300".
Выберите центр снежинки. В viewBox размером 300x300 центр находится в точке (150, 150).
Нарисуйте одну ветвь как <path> и оставьте fill="none", если нужна линейная графика.
Поместите path-элемент ветви в <defs>, чтобы переиспользовать ее без отображения исходного определения.
Используйте <use>, чтобы поставить ветвь шесть раз и повернуть каждую копию на 60 градусов вокруг центра.
Добавьте декоративные элементы, метаданные и необязательный <animateTransform>, если снежинка должна вращаться.

Шаг 1. Создайте SVG-документ

Каждое SVG-изображение начинается с элемента <svg>. Он задает область рисования и систему координат, в которой строится снежинка.

1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2  <!-- Код снежинки будет здесь -->
3</svg>

Разберем назначение каждого атрибута:

width и height задают размер отображения SVG на странице, в этом случае 300x300 пикселей. Эти значения определяют, насколько большой снежинка выглядит в браузере;
viewBox="0 0 300 300" задает систему координат внутри SVG-изображения. Первые два числа (0 0) обозначают левый верхний угол canvas, а следующие два (300 300) – его ширину и высоту в координатных единицах. Благодаря viewBox изображение масштабируется без потери четкости;
xmlns="http://www.w3.org/2000/svg" сообщает браузеру, что это SVG-документ, и обеспечивает корректный рендеринг.

Совет: всегда задавайте viewBox. Он позволяет снежинке чисто масштабироваться при разных размерах отображения. Подробнее смотрите в статье SVG viewBox.

Шаг 2. Начните с базовой ветви

Сначала выберите центр снежинки. В viewBox размером 300x300 центр находится в точке (150, 150). Вместо того чтобы вручную рисовать все шесть ветвей, нарисуйте одну ветвь и переиспользуйте ее. В примере используется элемент <path> для рисования линий:

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" />

Path работает так:

Каждая команда M атрибута d перемещает “перо” в начальную точку.
Каждая команда L рисует прямую линию к следующей координате.
Атрибут stroke задает ледяной синий цвет для элемента <path>.
stroke-linecap создает мягкие скругленные концы линий.

На этом этапе SVG содержит одну ветвь, то есть одну шестую будущей снежинки. Стиль ветви можно менять через атрибуты path, например stroke, stroke-width, stroke-linecap, stroke-dasharray и fill.

Следующий рисунок показывает ветви снежинки с разными стилями, примененными к элементу <path>.

Четыре варианта стиля ветви снежинки, отмеченные буквами a-d

a) Атрибут stroke-linecap="round", отвечающий за скругленные концы линий, не используется.
b) Атрибут stroke-linecap="round" используется.
c) Вместо прозрачной заливки fill="none" используется цвет заливки fill="#03b6fd".
d) Атрибут stroke-dasharray="2 8" изменяет внешний вид ветви.

Шаг 3. Поверните ветвь, чтобы построить всю снежинку

Переиспользуйте ветвь через элемент <use>, а не копируйте одни и те же данные path шесть раз. Трансформация вращения размещает каждую копию вокруг центра (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>

В результате получается шесть одинаковых ветвей, повернутых вокруг одной центральной точки:

Четыре варианта полной снежинки, отмеченные буквами a-d

Шаг 4. Добавьте декоративные элементы

Чтобы завершить иконку, добавьте окружность в центр для визуального акцента:

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

cx и cy задают центр окружности, в этом случае он находится ровно в середине viewBox 300x300.
r задает радиус.
fill и stroke задают цвета заливки и обводки.

Теперь снежинка представляет собой законченное векторное изображение, построенное из одной переиспользуемой ветви и одного центрального декоративного элемента.

Шаг 5. Анимируйте снежинку

Чтобы оживить снежинку, можно добавить вращение прямо в SVG-файл с помощью элемента <animateTransform>. Этот способ описывает поведение анимации внутри самого SVG, поэтому файл остается автономным и не зависит от внешнего CSS. Поместите <animateTransform> непосредственно внутрь группы <g>, содержащей все части снежинки. Тогда вся группа, включая ветви и декоративные элементы, будет вращаться вокруг центра (150, 150).

1<g id="snowflake1">
2  <!-- Анимация вращения -->
3  <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="30s" repeatCount="indefinite"/>
4
5  <!-- Ветви снежинки -->
6  <use href="#b1" />
7  <use href="#b1" transform="rotate(60 150 150)" />
8  ...
9</g>

type="rotate" – задает тип трансформации как вращение.
from / to – задают углы вращения и центр вращения в координатах x y.
dur="30s" – задает длительность одного полного оборота.
repeatCount="indefinite" – запускает анимацию бесконечно.

Преимущество такого подхода в том, что анимация полностью встроена в SVG. Она не зависит от внешних стилей и скриптов и работает одинаково в современных браузерах, даже если SVG используется через тег <img> или как фоновое изображение. Эффект остается переносимым и самодостаточным, поэтому снежинка будет вращаться в любом месте отображения. Но этот способ менее гибкий, чем CSS-анимация: один элемент <animateTransform> обрабатывает только одну трансформацию. Более сложные эффекты, например масштабирование или исчезновение, требуют дополнительных элементов.

Векторные SVG-снежинки хорошо подходят для зимних сайтов, праздничного дизайна и интерактивных элементов: анимированных загрузчиков, повторяющихся фонов, масштабируемой графики для цифровых открыток и печатных материалов. SVG-изображение снежинки и полный SVG-файл доступны по ссылке animated-snowflake.svg.

Синяя снежинка вращается вокруг своего центра

Оптимизация SVG-снежинок для SEO и доступности

Чтобы усилить SEO-эффект SVG-снежинок на сайте:

Добавьте теги title и desc:

1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2  <title>Декоративная зимняя снежинка</title>
3  <desc>Шестилучевая снежинка для зимнего праздничного оформления</desc>
4  <!-- код снежинки -->
5</svg>

Используйте семантические имена файлов: сохраняйте как winter-snowflake-icon.svg, а не image1.svg.
Добавляйте alt-текст при встраивании: <img src="winter-snowflake-icon.svg" alt="Синяя кристаллическая зимняя снежинка">.
Оптимизируйте размер файла: удаляйте лишние десятичные знаки и пробелы.

Теперь запишем полный код SVG-снежинки (animated-snowflake.svg). Он выглядит так:

 1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
 2  <title>Decorative winter snowflake</title>
 3  <desc>Six-Pointed snowflake for winter holiday decor</desc>
 4
 5  <!-- Define snowflake branch (hidden, only for reference) -->
 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  <!-- Rotating snowflake group -->
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	<!-- Center decoration -->
25	<circle cx="150" cy="150" r="10" fill="#03b6fd" stroke="white" stroke-width="3" />
26  </g>
27</svg>

Типичные ошибки и исправления

Проблема	Причина	Решение
Ветви снежинки вращаются вокруг неправильной точки	Использован `rotate(angle)` без указания центра, поэтому по умолчанию вращение идет вокруг `(0, 0)`, а не вокруг центра снежинки	Всегда передавайте все три аргумента: `transform="rotate(60 150 150)"`, где `150 150` – центр вашего `viewBox`.
Ветвь, заданная вне `<defs>`, отображается дважды	`<path id="b1">` помещен прямо в тело SVG и одновременно переиспользуется через `<use>`	Оберните определение ветви в `<defs>...</defs>`: элементы внутри `<defs>` не отображаются, пока на них не сошлются через `<use href="#b1">`.
`<use href="#b1">` ничего не отображает	Атрибут `href` не поддерживается в старых SVG 1.1 контекстах, например в IE или некоторых старых Android-браузерах	Для более широкой совместимости добавьте `xlink:href="#b1"` рядом с `href`: `<use href="#b1" xlink:href="#b1" />`.
Центральная окружность оказывается за ветвями	Элемент `<circle>` размещен перед элементами `<use>` в порядке документа	Переместите `<circle>` после всех элементов `<use>` внутри группы `<g>`: SVG рендерится в порядке документа, последний элемент оказывается сверху.
`fill` по умолчанию становится черным и делает ветвь сплошной	У элемента `<path>` пропущено `fill="none"`	Явно задайте `fill="none"` для path-элемента ветви, чтобы отображались только линии обводки: `<path ... fill="none" stroke="#03b6fd" .../>`.
Анимация не работает, когда SVG используется через `<img>`	CSS-правила `animation` из внешней таблицы стилей не влияют на SVG, загруженный как `<img>`	Используйте встроенный элемент `<animateTransform>` внутри самого SVG-файла: он работает независимо от способа встраивания SVG.
Анимация вращается вокруг `(0, 0)`, а не вокруг центра снежинки	В `<animateTransform>` используются `from="0"` / `to="360"` без точки центра	Укажите центр: `from="0 150 150"` и `to="360 150 150"`, чтобы снежинка вращалась на месте.
SVG не индексируется или плохо читается поисковыми системами	Нет элементов `<title>` или `<desc>`; файл сохранен с общим именем вроде `image1.svg`	Добавьте `<title>` и `<desc>` внутри `<svg>`, используйте описательное имя файла, например `winter-snowflake-icon.svg`, и задайте `alt` при встраивании через `<img>`.

Быстрые рецепты

1. Восьмилучевая снежинка вместо шестилучевой

Для восьмилучевой снежинки вращайте ветви с шагом 45°, а не 60°:

 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. Внутренний слой с вращением в обратную сторону

Добавьте вторую, меньшую группу ветвей, которая вращается в обратную сторону, чтобы получить многослойный эффект:

 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>

Определите #b2 как более короткую и тонкую ветвь в <defs>, чтобы визуально отделить два слоя.

3. Смещение ветвей через <g transform="rotate(30 150 150)">

Поверните всю группу снежинки на 30°, чтобы ветви располагались между осями. Это полезно при мозаичном размещении нескольких снежинок, когда нужно избежать визуального выравнивания:

1<g transform="rotate(30 150 150)">
2  <use href="#b1" />
3  <use href="#b1" transform="rotate(60 150 150)" />
4  <!-- оставшиеся ветви -->
5</g>

4. Переиспользование снежинки на странице через <symbol>

Определите снежинку один раз как <symbol> и размещайте ее в любом месте и в любом размере без повторения кода:

 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<!-- Размещение в разных размерах и позициях -->
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" />

Скопируйте нужный фрагмент и настройте координаты, цвета или длительность анимации.

FAQ – SVG-снежинки

Какие SVG-элементы используются, чтобы нарисовать снежинку?

Компактная снежинка обычно использует <path> для одной ветви, <defs> для переиспользуемого определения ветви, <use> для повторяющихся ветвей, transform="rotate(...)" для симметрии и необязательные <circle> или <animateTransform> для декора и движения.

Зачем использовать defs и use для снежинки?

<defs> и <use> делают SVG меньше и проще для редактирования. Вы определяете одну ветвь один раз, а затем переиспользуете ее под разными углами, не копируя одни и те же данные path много раз.

Можно ли использовать эту SVG-снежинку как иконку или фон?

Да. Сохраните viewBox, используйте описательное имя файла и добавьте осмысленный alt при встраивании SVG через <img>. Для фонов или декоративной графики оставляйте path-элемент простым и избегайте тяжелых фильтров.

Можно ли анимировать SVG-снежинку без CSS?

Да. Добавьте <animateTransform> внутрь группы снежинки, чтобы вращать SVG автономно. Это полезно, когда SVG должен анимироваться даже при встраивании как отдельный файл изображения.

Ключевые выводы

При создании снежинок в SVG держите код чистым и переиспользуемым. Определяйте повторяющиеся элементы, например ветви, через <defs> и <use>, чтобы уменьшить размер файла и упростить обновления.
Присваивайте значения id, например <path id="b1"> или <g id="snowflake1">, когда нужно ссылаться на конкретные части SVG-файла или анимировать их.
Всегда задавайте viewBox, чтобы снежинка корректно масштабировалась на разных экранах и разрешениях без потери пропорций.
Реальные снежинки никогда не бывают идентичными, поэтому можно экспериментировать с асимметричными деталями, сохраняя общую шестилучевую структуру.
Оптимизируйте производительность. Создавайте простые path-элементы и избегайте лишних точек и сложных фильтров. Легкие SVG-изображения рендерятся быстрее, а анимации выглядят плавнее.

Связанные ресурсы

Используйте эти материалы, если хотите лучше понять или расширить процесс создания снежинки:

Спецификация SVG 2 Document Structure определяет переиспользуемые элементы SVG, такие как <defs>, <use> и <symbol>.
Системы координат и единицы SVG объясняет систему координат, используемую для позиционирования и вращения ветвей.
SVG viewBox объясняет, как viewBox помогает SVG-графике чисто масштабироваться.
Данные path в SVG объясняет команды M и L, используемые в path-элементе ветви.
Базовые SVG-трансформации рассматривает transform rotate(angle cx cy), который используется для построения снежинки.
Заливка и обводка в SVG объясняет ширину обводки, форму концов линий, пунктирные паттерны и поведение fill.
Как работать с Aspose.SVG for .NET API объясняет процессы программного создания и редактирования SVG на C#.

SVG-градиенты