Cómo dibujar un copo de nieve en SVG

Este tutorial muestra cómo dibujar un copo de nieve en SVG creando una rama, reutilizándola con <use>, rotando copias alrededor del centro y añadiendo una animación SVG opcional. El mismo patrón sirve para iconos de copos, fondos de invierno, loaders decorativos, tarjetas de felicitación y recursos vectoriales reutilizables.

Respuesta rápida: Dibuja una rama del copo como <path>, colócala en <defs>, reutilízala seis veces con <use> y rota cada copia alrededor del centro con transform="rotate(angle cx cy)".

En este artículo aprenderás a:

definir un viewBox SVG para un dibujo de copo escalable;
dibujar una rama con comandos de path;
reutilizar la rama con <defs> y <use>;
rotar ramas alrededor del centro del copo;
añadir una decoración central y una rotación opcional con <animateTransform>;
optimizar un copo SVG para accesibilidad, SEO y reutilización.

Por qué SVG es perfecto para copos de nieve

SVG es un buen formato para dibujos de copos de nieve porque la ilustración es geométrica, escalable, editable y normalmente pequeña. Un copo puede construirse a partir de líneas repetidas y transformaciones, sin copiar muchos paths independientes.

Tres copos de nieve con estilos diferentes giran alrededor de su eje.

Los copos de nieve, con su simetría de seis lados y líneas limpias, son un ejemplo práctico de lo que SVG hace bien:

Escalables – mantienen nitidez a cualquier tamaño, desde iconos pequeños hasta fondos grandes.
Tamaño de archivo pequeño – el código SVG suele ser menor que una imagen raster.
Beneficios SEO – los motores de búsqueda pueden leer e indexar contenido SVG.
Estilos CSS – es fácil cambiar color, tamaño y ancho de trazo, además de animarlos.

Estructura básica de un copo de nieve

Un copo SVG simple puede construirse con seis ramas rotadas alrededor de un punto central. Como una vuelta completa son 360 grados, seis ramas iguales se separan 60 grados. El enfoque básico es:

Crear una rama.
Rotar la rama original alrededor del centro 60 grados cinco veces para crear seis ramas.
Añadir elementos decorativos.

Este ejemplo de copo usa paths SVG, transformaciones, elementos reutilizables, rellenos, trazos y viewBox. Estos artículos relacionados explican los conceptos de base:

Sistemas de coordenadas y unidades SVG explica canvas, viewport, unidades y sistema de coordenadas.
Formas SVG muestra cómo crear formas básicas y aplicar estilos simples.
Datos de path SVG explica cómo los paths dibujan contornos con comandos de línea, arco y curva.
Transformaciones SVG básicas cubre rotación, escalado, traslación e inclinación con transform.
Rellenos y trazos en SVG explica color de trazo, ancho, opacidad, guiones y comportamiento de fill.

Cómo dibujar un copo SVG

Crea un elemento <svg> con un viewBox cuadrado, por ejemplo viewBox="0 0 300 300".
Elige el punto central del copo. En un viewBox 300x300, el centro es (150, 150).
Dibuja una rama como <path> y usa fill="none" si quieres arte de líneas.
Coloca el path de la rama en <defs> para reutilizarlo sin renderizar la definición original.
Usa <use> para estampar la rama seis veces y rota cada copia 60 grados alrededor del centro.
Añade decoraciones, metadatos y, si el copo debe girar, un <animateTransform> opcional.

Paso 1. Crear un documento SVG

Toda imagen SVG empieza con el elemento <svg>. Este define el área de dibujo y el sistema de coordenadas usado por el copo.

1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2  <!-- Your snowflake code will go here -->
3</svg>

El propósito de cada atributo es:

width y height definen el tamaño de visualización en la página, aquí 300x300 píxeles;
viewBox="0 0 300 300" define el sistema de coordenadas interno. Los dos primeros números representan la esquina superior izquierda del canvas y los dos siguientes su anchura y altura en unidades de coordenadas;
xmlns="http://www.w3.org/2000/svg" indica al navegador que se trata de un documento SVG y asegura el renderizado correcto.

Consejo: Define siempre un viewBox. Permite que el copo escale limpiamente a distintos tamaños. Para más detalle, consulta SVG viewBox.

Paso 2. Empezar con la rama básica

Elige primero el centro del copo. En un viewBox 300x300, el centro es (150, 150). En lugar de dibujar las seis ramas manualmente, dibuja una rama y reutilízala. El ejemplo usa un elemento <path> para dibujar líneas:

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

El path funciona así:

Cada comando M del atributo d mueve la “pluma” a un punto inicial.
Cada comando L dibuja una línea recta hasta la siguiente coordenada.
El atributo stroke define el color azul hielo del elemento <path>.
stroke-linecap crea extremos suaves y redondeados.

En este punto, el SVG contiene una rama, es decir, una sexta parte del copo final. Puedes cambiar el estilo de la rama editando atributos como stroke, stroke-width, stroke-linecap, stroke-dasharray y fill.

La figura siguiente muestra ramas de copo con distintos estilos aplicados al elemento <path>.

Cuatro estilos diferentes de una rama de copo de nieve etiquetados de a a d

a) No se usa stroke-linecap="round", responsable de los extremos redondeados.
b) Se usa stroke-linecap="round".
c) Se usa color de relleno fill="#03b6fd" en lugar del relleno transparente fill="none".
d) Se usa stroke-dasharray="2 8" para cambiar el aspecto de la rama.

Paso 3. Rotar la rama para construir el copo completo

Reutiliza la rama con <use> en lugar de copiar los mismos datos de path seis veces. Una transformación de rotación coloca cada copia alrededor del centro (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>

El resultado son seis ramas idénticas rotadas alrededor del mismo centro:

Cuatro estilos diferentes de un copo de nieve completo etiquetados de a a d

Paso 4. Añadir más decoración

Para terminar el icono, añade un círculo en el centro para darle peso visual:

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

cx y cy definen el centro del círculo, en este caso justo en el centro del viewBox 300x300.
r es el radio.
fill y stroke definen sus colores.

Ahora el copo es un dibujo vectorial completo construido a partir de una rama reutilizable y una decoración central.

Paso 5. Animar el copo

Para dar vida al copo, puedes añadir una animación de rotación directamente en el archivo SVG con <animateTransform>. Este método define el comportamiento de animación dentro del propio SVG, de modo que no depende de CSS externo. Coloca <animateTransform> dentro del grupo <g> que contiene todas las partes del copo. Así, todo el grupo rota alrededor del centro (150, 150).

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

type="rotate" define el tipo de transformación.
from / to especifican ángulos y centro de rotación (x y).
dur="30s" establece la duración de una vuelta completa.
repeatCount="indefinite" hace que la animación se repita de forma continua.

La ventaja de este enfoque es que la animación queda incrustada en el SVG, independiente de estilos y scripts externos. El efecto se mantiene portable y autocontenido. Sin embargo, es menos flexible que una animación CSS, porque cada <animateTransform> maneja una única transformación; efectos más complejos, como escalado o desvanecimiento, requieren elementos adicionales.

Las imágenes vectoriales de copos son ideales para sitios de invierno, diseños festivos y elementos interactivos, desde loaders animados y fondos repetidos hasta gráficos escalables para tarjetas digitales o impresión. Puedes ver la imagen SVG y el archivo completo en animated-snowflake.svg.

Copo de nieve azul rotando alrededor de su centro

Optimizar copos SVG para SEO y accesibilidad

Para maximizar el impacto SEO de los copos SVG en tu sitio:

Añade etiquetas title y desc:

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  <!-- snowflake code -->
5</svg>

Usa nombres de archivo semánticos: guarda como winter-snowflake-icon.svg, no image1.svg.
Añade texto alternativo al incrustarlo: <img src="winter-snowflake-icon.svg" alt="Blue crystalline winter snowflake">.
Optimiza el tamaño: elimina decimales y espacios innecesarios.

Ahora escribamos el código completo del copo 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>

Errores comunes y soluciones

Problema	Causa	Solución
Las ramas rotan alrededor del punto equivocado	Se usa `rotate(angle)` sin centro, por lo que el valor predeterminado es `(0, 0)`	Pasa los tres argumentos: `transform="rotate(60 150 150)"`, donde `150 150` es el centro del `viewBox`.
La rama definida se renderiza dos veces	`<path id="b1">` está en el cuerpo SVG y también se reutiliza con `<use>`	Envuelve la definición en `<defs>...</defs>`; los elementos dentro de `<defs>` no se renderizan hasta ser referenciados.
`<use href="#b1">` no muestra nada	`href` no es compatible en contextos SVG 1.1 antiguos	Añade `xlink:href="#b1"` junto a `href` si necesitas compatibilidad más amplia.
El círculo central aparece detrás de las ramas	`<circle>` se colocó antes de los elementos `<use>`	Mueve `<circle>` después de todos los `<use>` dentro del grupo `<g>`. SVG renderiza en orden de documento.
`fill` vuelve la rama sólida y negra	Se omitió `fill="none"` en `<path>`	Define explícitamente `fill="none"` para renderizar solo líneas de trazo.
La animación no funciona al usar el SVG como `<img>`	Las reglas CSS externas no afectan a un SVG cargado como imagen	Usa `<animateTransform>` dentro del propio archivo SVG.

Recetas rápidas

1. Copo de ocho ramas en lugar de seis

Rota en incrementos de 45° en lugar de 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. Reutilizar el copo con <symbol>

Define el copo una vez como <symbol> y estampa copias en cualquier tamaño sin repetir código:

 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<use href="#snowflake" x="0" y="0" width="80" height="80" />
14<use href="#snowflake" x="100" y="50" width="120" height="120" />

FAQ – Copos SVG

¿Qué elementos SVG se usan para dibujar un copo de nieve?

Un copo compacto suele usar <path> para una rama, <defs> para la definición reutilizable, <use> para ramas repetidas, transform="rotate(...)" para simetría y elementos opcionales <circle> o <animateTransform> para decoración y movimiento.

¿Por qué usar defs y use para un copo?

<defs> y <use> mantienen el SVG más pequeño y fácil de editar. Defines una rama una vez y luego la reutilizas con distintos ángulos de rotación, en lugar de copiar los mismos datos de path muchas veces.

¿Puedo usar este copo SVG como icono o fondo?

Sí. Conserva viewBox, usa un nombre de archivo descriptivo y añade texto alt significativo al incrustarlo con <img>. Para fondos o gráficos decorativos, mantén paths simples y evita filtros pesados.

¿Puedo animar un copo SVG sin CSS?

Sí. Añade <animateTransform> dentro del grupo del copo para rotar el SVG de forma autocontenida. Es útil cuando el SVG debe animarse incluso al incrustarse como archivo de imagen.

Ideas clave

Al crear copos en SVG, mantén el código limpio y reutilizable. Define elementos repetidos con <defs> y <use>.
Asigna valores id, como <path id="b1"> o <g id="snowflake1">, cuando necesites referenciar o animar partes concretas.
Define siempre un viewBox para que el copo escale correctamente en diferentes pantallas y resoluciones.
Experimenta con detalles asimétricos sin perder la estructura general de seis lados.
Optimiza el rendimiento con paths simples y sin filtros innecesarios.

Recursos relacionados

La especificación SVG 2 Document Structure define elementos reutilizables como <defs>, <use> y <symbol>.
Sistemas de coordenadas y unidades SVG explica el sistema usado para posicionar y rotar ramas.
SVG viewBox explica cómo viewBox permite escalar el arte SVG limpiamente.
Datos de path SVG explica los comandos M y L usados en el path de la rama.
Transformaciones SVG básicas cubre rotate(angle cx cy), usado para construir el copo.
Rellenos y trazos en SVG explica ancho de trazo, extremos, guiones y comportamiento de fill.
Cómo trabajar con Aspose.SVG for .NET API explica flujos programáticos de creación y edición SVG en C#.

Gradientes SVG