¿Qué es SVG?

SVG, o Gráficos Vectoriales Escalables, es un formato de imagen vectorial basado en XML para gráficos bidimensionales.

Características principales:

• Escalabilidad: Las imágenes permanecen nítidas a cualquier escala, ya que se describen mediante fórmulas matemáticas, no píxeles.
• Formato XML: La estructura de los archivos SVG se describe mediante etiquetas, similar a HTML. Esto los hace legibles y editables en texto.
• Interactividad: Posibilidad de agregar elementos interactivos mediante JavaScript.
• Animación: Soporte para animación de elementos con CSS o JavaScript.
• Accesibilidad: Capacidad de describir contenido para personas con discapacidades.
• Ligereza: Los archivos SVG pueden ser más pequeños que las imágenes rasterizadas con la misma calidad.

Formas de usar SVG:

• Integración en HTML mediante la etiqueta <svg>:

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
  

• Uso como fondo en CSS:

  .element {
    background-image: url('image.svg');
  }
  

• A través de la etiqueta <img>:

  <img src="image.svg" alt="Mi imagen SVG">
  

• A través de la etiqueta <object> o <iframe>.

SVG es ideal para logotipos, íconos, ilustraciones, gráficos y diagramas, donde la claridad en diferentes tamaños y la posibilidad de interactividad son importantes.