Etiquetas SVG Fundamentales

A continuación encontrarás explicaciones y ejemplos de algunas etiquetas esenciales de SVG.

1. Contenedor <svg>

El contenedor principal para gráficos SVG. Todo elemento SVG debe estar dentro de él.

<svg width="200" height="200">
  <!-- Aquí van los elementos gráficos -->
</svg>
    

Más información: W3Schools — Introducción a SVG

2. Rectángulos <rect>

Permite dibujar rectángulos dentro del SVG.

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="50" fill="blue"></rect>
</svg>
    

Más información: W3Schools — Rectángulos SVG

3. Círculos <circle>

Dibuja un círculo en el SVG usando coordenadas y radio.

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="red"></circle>
</svg>
    

Más información: W3Schools — Círculos SVG

4. Caminos <path>

Se utiliza para dibujar formas complejas definiendo una ruta con comandos.

<svg width="200" height="200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"></path>
</svg>
    

Más información: W3Schools — Path SVG

5. Texto <text>

Permite agregar texto dentro de un gráfico SVG.

<svg width="200" height="200">
  <text x="10" y="50" font-family="Arial" font-size="20" fill="green">Hola SVG</text>
</svg>
    

Más información: W3Schools — Texto SVG