Definición

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML que se utiliza para describir gráficos bidimensionales. A diferencia de los formatos de imagen rasterizados (como JPEG o PNG) que están compuestos por píxeles, los SVG utilizan fórmulas matemáticas para definir líneas, formas y colores. Esto les permite escalar a cualquier tamaño sin perder calidad ni nitidez, lo que los hace ideales para la web.

El formato SVG fue introducido en 1999, cuando Adobe y otras empresas presentaron la especificación al Consorcio World Wide Web (W3C). El objetivo era crear un estándar abierto y gratuito para gráficos vectoriales en la web, compitiendo con formatos propietarios como VML (Vector Markup Language) de Microsoft y PGML de Adobe.

Después de un largo proceso de examen y la combinación de ideas de ambos formatos, el W3C dio origen al estándar SVG. Aunque tardó un tiempo en ganar popularidad, a partir de 2017 la compatibilidad con SVG en los navegadores modernos aumentó significativamente, y los desarrolladores comenzaron a apreciar sus beneficios. La versión más reciente de la especificación completa es SVG 2.0, cuya última recomendación del W3C se publicó el 8 de marzo de 2023.

Un archivo SVG es esencialmente un documento XML que contiene instrucciones sobre cómo dibujar una imagen. Estas instrucciones describen qué formas deben dibujarse (círculos, rectángulos, líneas, polígonos, rutas, etc.), qué colores usar, cómo deben rellenarse, el grosor de los trazos, y otros atributos visuales.

Las características clave de SVG incluyen:

• Basado en XML:

  Su estructura se asemeja a la de HTML, con etiquetas que definen los elementos gráficos y sus propiedades.

• Vectorial:

  Las imágenes se definen mediante fórmulas matemáticas, lo que permite escalarlas infinitamente sin pixelación.

• Escalabilidad:

  Se ven nítidas en cualquier resolución y tamaño de pantalla, desde dispositivos móviles pequeños hasta pantallas de alta resolución.

• Manipulable con CSS y JavaScript:

  Dado que son esencialmente código XML, los SVG pueden ser estilizados con CSS y manipulados dinámicamente con JavaScript, al igual que cualquier otro elemento HTML. Esto permite crear interacciones, animaciones y cambios en tiempo real.

• Accesibilidad y SEO:

  El texto dentro de un SVG es seleccionable, se puede buscar e indexar por los motores de búsqueda, lo que mejora la accesibilidad y el SEO.

• Tamaño de archivo reducido para gráficos simples:

  Para logotipos, iconos e ilustraciones simples, los archivos SVG suelen ser mucho más ligeros que sus equivalentes rasterizados.

• Transparencia:

  Por defecto, los fondos SVG son transparentes.

Los SVG pueden incrustarse directamente en el código HTML utilizando la etiqueta <svg>, o pueden ser guardados como archivos .svg externos e insertados como cualquier otra imagen (usando <img>, <object>, <embed>, o <iframe>).

Los SVG son muy versátiles y se utilizan en una amplia gama de aplicaciones web:

• Iconos y logotipos:

  Son perfectos para iconos de sitios web y logotipos empresariales, ya que mantienen su nitidez y calidad sin importar el tamaño al que se muestren. Esto es crucial para el diseño responsivo.

  <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> </svg>
• Ilustraciones e infografías:

  Debido a su escalabilidad, los SVG son excelentes para ilustraciones, diagramas, gráficos y elementos infográficos que necesitan verse bien en diferentes contextos.

  <svg width="200" height="150" viewBox="0 0 200 150"> <circle cx="50" cy="50" r="40" fill="#FFC107"/> <rect x="100" y="30" width="80" height="60" fill="#2196F3"/> <line x1="20" y1="120" x2="180" y2="120" stroke="#4CAF50" stroke-width="5"/> <text x="50" y="140" font-family="Arial" font-size="16" fill="#757575"> Gráfico SVG </text> </svg>
• Animaciones:

  Se pueden animar fácilmente utilizando CSS o JavaScript, lo que permite crear efectos dinámicos e interactivos, como animaciones de carga, transiciones de iconos o gráficos que reaccionan a la interacción del usuario.

  <svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" fill="lightblue"> <animate attributeName="x" from="10" to="50" dur="2s" repeatCount="indefinite"/> <animate attributeName="fill" from="lightblue" to="red" dur="2s" repeatCount="indefinite"/> </rect> </svg>
• Gráficos interactivos:

  Se pueden usar para crear mapas interactivos, gráficos de datos o elementos de UI que cambian de estado al pasar el ratón, hacer clic, etc.

  <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="orange" class="my-circle"/> </svg> .my-circle:hover { fill: purple; transition: fill 0.3s ease; cursor: pointer; }
• Patrones y texturas:

  Los SVG pueden usarse para definir patrones complejos que se aplican como rellenos o trazos, ofreciendo flexibilidad en el diseño visual.

• Filtros y efectos:

  Proporcionan una amplia gama de filtros (como desenfoque gaussiano, sombras, texturas, etc.) que se pueden aplicar a elementos SVG e incluso a contenido HTML.

  <svg width="0" height="0"> <filter id="blurFilter"> <feGaussianBlur in="SourceGraphic" stdDeviation="4"/> </filter>> </svg> <img src="../../pagina_inicio/imagenes/estandares-web.jpg" title="Imagen con filtro SVG" alt="Imagen con filtro SVG"> img { transform: scale(0.6); filter: url(#blurFilter); }

<svg width="" height="" viewBox="   "
 preserveAspectRatio="xMaxYMax"></svg>