La Etiqueta SVG

Permite integrar gráficos vectoriales escalables directamente en un documento web. SVG (Scalable Vector Graphics) es un estándar basado en XML para crear imágenes y formas que mantienen su calidad en cualquier tamaño o resolución.

La etiqueta <svg> en HTML permite integrar gráficos vectoriales escalables directamente en un documento web. SVG (Scalable Vector Graphics) es un estándar basado en XML para crear imágenes y formas que mantienen su calidad en cualquier tamaño o resolución. Es ideal para iconos, gráficos, animaciones y visualizaciones complejas. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica de <svg> incluye atributos para definir el tamaño y el área visible:

<svg width="ancho" height="alto" viewBox="x y ancho alto">
  <!-- Elementos SVG aquí -->
</svg>

  • width y height: Tamaño del lienzo SVG en píxeles o unidades relativas.

  • viewBox: Define el sistema de coordenadas interno (x, y, ancho, alto).

Ejemplo mínimo:

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Elementos comunes de SVG

a) Formas básicas

Círculo (<circle>)

<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" />

  • cx, cy: Coordenadas del centro.

  • r: Radio.

Rectángulo (<rect>)

<rect x="10" y="10" width="80" height="60" fill="green" />

Línea (<line>)

<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3" />

Texto (<text>)

<text x="20" y="50" font-family="Arial" font-size="20" fill="purple">Hola SVG</text>

Polígono (<polygon>)

<polygon points="50,5 90,90 10,90" fill="orange" />

Ejemplos prácticos

a) Icono de corazón

<svg width="100" height="100" viewBox="0 0 24 24">
  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="red"/>
</svg>

b) Gráfico de barras

<svg width="300" height="200">
  <rect x="20" y="50" width="50" height="150" fill="#3498db" />
  <rect x="100" y="100" width="50" height="100" fill="#2ecc71" />
  <rect x="180" y="150" width="50" height="50" fill="#e74c3c" />
</svg>

Animaciones y efectos

a) Animación con CSS

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="r" from="10" to="40" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

Nota: Algunas animaciones pueden requerir SMIL o JavaScript.

b) Hover con CSS

<style>
  .svg-hover:hover {
    fill: #e74c3c;
    transform: scale(1.1);
  }
</style>
<svg width="100" height="100">
  <rect class="svg-hover" x="10" y="10" width="80" height="80" fill="#3498db" />
</svg>

Integración con HTML

a) SVG inline vs. externo

Inline: Incrustar SVG directamente en HTML (mejor para interactividad).

Externo: Vincular un archivo .svg usando <img>:

<img src="icono.svg" alt="Icono" width="100" height="100">

b) Accesibilidad

Usa atributos ARIA para describir el contenido:

<svg role="img" aria-labelledby="title">
  <title id="title">Gráfico de ventas 2023</title>
  <!-- Elementos del gráfico -->
</svg>

Herramientas y buenas prácticas

  • Editores gráficos: Usa Inkscape, Figma o Adobe Illustrator para crear SVG.

  • Optimización: Reduce el tamaño del código con herramientas como SVGO.

  • Mantén el código limpio: Elimina metadatos innecesarios y agrupa elementos con <g>.

Ejemplo de grupo (<g>)

<svg width="200" height="200">
  <g transform="translate(100,100)">
    <circle cx="0" cy="0" r="40" fill="yellow" />
    <text x="-20" y="5" fill="black">Sol</text>
  </g>
</svg>

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    .svg-container {
      background: #f0f0f0;
      padding: 20px;
    }
    .estrella {
      fill: #f1c40f;
      transition: transform 0.3s;
    }
    .estrella:hover {
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <svg width="150" height="150" viewBox="0 0 24 24">
      <path class="estrella" d="M12 0l3.09 6.26L22 7.27l-5 4.87 1.18 6.88L12 16l-6.18 3.02L7 12.14 2 7.27l6.91-1.01L12 0z"/>
    </svg>
  </div>
</body>
</html>

Conclusión

La etiqueta <svg> es una herramienta poderosa para:

  • Crear gráficos escalables y nítidos en cualquier dispositivo.

  • Desarrollar animaciones e interactividades avanzadas.

  • Integrar iconos y elementos visuales sin perder calidad.

Recuerda:

  • Usa editores gráficos para diseños complejos.

  • Optimiza el código SVG para mejorar el rendimiento.

  • Prioriza la accesibilidad con roles y etiquetas ARIA.

¡Domina <svg> para llevar tus diseños web al siguiente nivel!