Formas SVG – conceptos básicos, código y ejemplos

Las formas vectoriales simples son los bloques de construcción de logotipos, diagramas, iconos, gráficos y muchos otros SVG. En un archivo SVG, cada forma básica se representa mediante un elemento cuyos atributos definen posición, tamaño y estilo visual. Puedes personalizar color de relleno, opacidad, esquinas redondeadas, ancho de trazo y más.

En este artículo aprenderás a:

• Crear rectángulos, círculos, elipses, líneas, polilíneas y polígonos SVG.
• Leer los atributos de coordenadas usados por cada forma básica.
• Aplicar fill, stroke, opacidad y esquinas redondeadas.
• Combinar varios elementos de forma en una sola imagen SVG.

SVG <rect> – elemento rectángulo

El elemento <rect> crea rectángulos y rectángulos con esquinas redondeadas. Un rectángulo se posiciona por su esquina superior izquierda y luego se dimensiona con width y height.

Atributos de rectángulo

Atributo	Descripción	Predeterminado
x	Coordenada X de la esquina superior izquierda	0
y	Coordenada Y de la esquina superior izquierda	0
width	Anchura del rectángulo	–
height	Altura del rectángulo	–
rx	Radio horizontal para esquinas redondeadas	0
ry	Radio vertical para esquinas redondeadas	0

Puedes estilizar el rectángulo con atributos de presentación o con el atributo style. El ejemplo siguiente usa fill, stroke, opacidad y radios de esquina para mostrar cómo trabajan juntas la geometría y la pintura.

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
</svg>

El primer ejemplo crea un rectángulo cuya esquina superior izquierda está en (60, 100). El rectángulo mide 70 unidades de ancho y 40 de alto, tiene esquinas redondeadas y un trazo naranja. El segundo ejemplo elimina las esquinas redondeadas y usa un rectángulo más grande, casi cuadrado, para que la diferencia entre rx/ry y esquinas normales sea fácil de ver.

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <rect x="120" y="140" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

Propiedades de estilo usadas

• fill – color de relleno del rectángulo
• fill-opacity – transparencia del relleno (0 totalmente transparente, 1 opaco)
• stroke – color del borde
• stroke-width – grosor del borde
• stroke-opacity – transparencia del borde

Los colores pueden especificarse como:

1. Nombres de color, por ejemplo fill:blue.
2. Función RGB, por ejemplo fill:rgb(0,0,255).
3. Notación HEX, por ejemplo fill:#0000ff.

SVG <circle> – elemento círculo

El elemento <circle> dibuja un círculo perfecto. Su posición se define mediante las coordenadas del centro cx y cy, y su tamaño mediante el radio r.

Atributos de círculo

Atributo	Descripción	Predeterminado
cx	Coordenada X del centro del círculo	0
cy	Coordenada Y del centro del círculo	0
r	Radio del círculo	–

<svg width="300" height="550" xmlns="http://www.w3.org/2000/svg">
    <circle cx="250" cy="100" r="60" style="fill:red; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7" />
</svg>

El código define cx y cy para el centro y r para el radio. Como el círculo se pinta con fill y stroke, la salida también muestra cómo se combinan la geometría de la forma y las propiedades de pintura.

El círculo se extiende más allá del viewport de 300 px de ancho; se necesita una anchura mínima de 310 px (cx + r) para verlo completo.

SVG <ellipse> – elemento elipse

El elemento <ellipse> crea una forma ovalada. También usa un punto central, pero tiene dos radios: rx para el tamaño horizontal y ry para el tamaño vertical.

Atributos de elipse

Atributo	Descripción	Predeterminado
cx	Coordenada X del centro de la elipse	0
cy	Coordenada Y del centro de la elipse	0
rx	Radio horizontal, la mitad de la anchura	–
ry	Radio vertical, la mitad de la altura	–

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
    <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
</svg>

El ejemplo dibuja dos elipses con radios y opacidad diferentes. La segunda elipse, gris y con 50% de opacidad, se renderiza encima de la primera porque SVG pinta los elementos en el orden del documento: los elementos posteriores aparecen sobre los anteriores.

SVG <line> – elemento línea

El elemento <line> dibuja un segmento recto entre dos puntos de coordenadas. No tiene área de relleno, por lo que las líneas visibles normalmente necesitan stroke y stroke-width.

Atributos de línea

Atributo	Descripción	Predeterminado
x1	Coordenada X del punto inicial	–
y1	Coordenada Y del punto inicial	–
x2	Coordenada X del punto final	–
y2	Coordenada Y del punto final	–
style (stroke, stroke-width)	Estilo visual de la línea	–

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
    <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
    <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
</svg>

Cada línea del ejemplo tiene un punto inicial, punto final, color y grosor diferentes. La propiedad stroke define el color de línea, mientras que stroke-width establece su grosor.

SVG <polyline> – elemento polilínea

El elemento <polyline> dibuja una serie de segmentos rectos conectados. Se usa a menudo para líneas quebradas, líneas de gráficos, contornos simples y formas angulares abiertas.

Atributos de polyline

Atributo	Descripción	Predeterminado
points	Lista de pares de coordenadas x,y que definen los vértices	–
style (fill, stroke, stroke-width)	Estilo visual de la forma	–

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
    <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
</svg>

La primera polilínea usa tres puntos y visualmente forma una figura parecida a un triángulo. La segunda es una línea abierta en zigzag con fill="none", que suele ser la opción más clara cuando una polilínea debe comportarse como una línea y no como una forma rellena.

Para más detalles sobre estilos SVG, consulta Rellenos y trazos en SVG.

SVG <polygon> – elemento polígono

El elemento <polygon> define una forma cerrada formada por una serie de puntos conectados. SVG conecta automáticamente el último punto con el primero.

Atributos de polygon

Atributo	Descripción	Predeterminado
points	Lista de pares de coordenadas x,y para cada vértice, debe contener al menos tres puntos	–
style (fill, stroke, stroke-width)	Estilo visual del polígono	–

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <polygon points="160,10 350,140 210,350 50,199" style="fill:orange;stroke:purple;stroke-width:1" />
</svg>

El ejemplo del polígono usa cuatro pares de coordenadas en el atributo points. Como <polygon> siempre está cerrado, el trazo púrpura vuelve automáticamente desde el último punto hasta el primero.

Cómo crear formas SVG

1. Crea un elemento <svg> exterior con width, height y xmlns.
2. Elige una forma básica como <rect>, <circle>, <ellipse>, <line>, <polyline> o <polygon>.
3. Define los atributos requeridos de coordenadas y tamaño para ese elemento.
4. Añade atributos visuales como fill, stroke, stroke-width u opacidad.
5. Previsualiza el SVG y ajusta coordenadas, tamaño o viewport si la forma aparece recortada.

Formas básicas SVG – ejemplo combinado

Un documento SVG mínimo puede combinar todas las formas básicas en una sola ilustración. Esto es útil cuando necesitas crear diagramas, insignias, iconos o gráficos generados a partir de primitivas simples.

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
    <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
    <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
    <polygon points="160,10 350,140 210,350 50,199" style="fill:orange; stroke:purple; stroke-width:1; fill-opacity:1" />
    <rect x="120" y="150" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
    <circle cx="250" cy="100" r="60" style="fill:red; stroke:black; stroke-width:3; fill-opacity:0.7" />
    <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
    <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
    <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
    <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
    <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
</svg>

La ilustración “SVG Basic Shapes” contiene todas las figuras descritas arriba: líneas, rectángulos, un círculo, elipses, polilíneas y un polígono. A su lado aparece la famosa pintura “Pink Accent” de Wassily Kandinsky, que muestra cómo formas geométricas simples pueden convertirse en una composición más expresiva.

Errores comunes en formas SVG y soluciones

Problema	Causa probable	Cómo solucionarlo
La forma no se ve	El viewport SVG es menor que la forma	Aumenta width / height o ajusta viewBox
La forma está recortada	Las coordenadas exceden los límites del viewport	Recalcula coordenadas o amplía el canvas SVG
No aparece el color de relleno	Se estableció fill="none" o fill-opacity="0"	Define un valor fill válido y opacidad
El trazo es invisible	stroke-width="0" o falta stroke	Define tanto stroke como un stroke-width positivo
Las esquinas redondeadas no funcionan	Faltan valores rx / ry o son cero	Define atributos rx y ry distintos de cero
Los elementos se solapan de forma inesperada	SVG renderiza los elementos en el orden del documento	Reordena los elementos en el marcado o usa agrupación

Recetas rápidas de color para formas SVG

Tarea	Ejemplo
Relleno sólido	fill="blue"
Relleno semitransparente	fill="red" fill-opacity="0.5"
Relleno transparente con contorno visible	fill="none" stroke="black"
Trazo semitransparente	stroke="black" stroke-opacity="0.4"
Contorno grueso coloreado	stroke="orange" stroke-width="6"
Contorno discontinuo	stroke-dasharray="5,3"

Para técnicas avanzadas de estilo SVG, consulta Rellenos y trazos en SVG.

FAQ – Formas SVG

¿Cómo elijo el elemento de forma SVG correcto?

Usa <rect> para rectángulos, <circle> para formas redondas de radio igual, <ellipse> para óvalos, <line> para un segmento recto, <polyline> para una cadena abierta de segmentos y <polygon> para una forma cerrada hecha de puntos.

¿Cuál es la diferencia entre polyline y polygon?

<polyline> dibuja puntos conectados pero permanece abierta salvo que repitas manualmente el primer punto. <polygon> cierra la forma automáticamente conectando el último punto con el primero.

¿Las formas SVG pueden usar fill y stroke juntos?

Sí. La mayoría de formas SVG pueden usar tanto fill como stroke. fill pinta el interior de la forma, mientras que stroke y stroke-width dibujan el contorno.

¿Las formas SVG básicas pueden sustituir path data?

Sí, cuando el gráfico es un rectángulo, círculo, elipse, línea recta, polilínea o polígono simple. Usa Datos de path SVG cuando necesites curvas, arcos, contornos personalizados o un contorno complejo único.

Especificación y recursos relacionados

• La sección de la especificación SVG sobre formas básicas define <rect>, <circle>, <ellipse>, <line>, <polyline> y <polygon>.
• Usa Sistemas de coordenadas y unidades SVG para entender cómo coordenadas x/y, puntos centrales, radios y tamaño del viewport afectan la colocación.
• Abre Rellenos y trazos en SVG para ancho de trazo, extremos, uniones, opacidad y guiones.
• Ve a Color SVG para formatos de color, opacidad, fill y stroke.
• Continúa con Datos de path SVG cuando las formas básicas no sean lo bastante flexibles.
• Usa Editar archivo SVG para ejemplos de API .NET que crean, añaden y editan elementos SVG.
• Ve a Dibujar formas SVG en Python para ejemplos de Python via .NET que crean rectángulos, círculos, elipses, líneas, polilíneas y polígonos.