SVG (Formatos de Imagen)
Nivel Principiante
Imagina que en lugar de dibujar una imagen con puntos de colores, la dibujas con matemáticas, diciéndole a la computadora: «dibuja un círculo de 20 píxeles de radio aquí y una línea de este punto a este otro». El SVG (Scalable Vector Graphics) es un formato de imagen que hace eso. Como se dibuja con fórmulas, puedes hacerlo tan grande como quieras sin que se vea borroso o pixelado. Por eso, es perfecto para logotipos, iconos y gráficos que se tienen que ver bien en pantallas de todos los tamaños.
Nivel Intermedio
SVG (Scalable Vector Graphics) es un formato de imagen bidimensional basado en XML que define gráficos vectoriales. A diferencia de los formatos de imagen basados en píxeles (como JPEG y PNG), que se degradan al escalarse, los archivos SVG son independientes de la resolución. Un gráfico SVG se describe con código, lo que significa que el navegador lo renderiza en el momento de la visualización, haciendo que se vea perfectamente nítido en cualquier dispositivo y con cualquier nivel de zoom.
Las principales ventajas de utilizar SVG son:
- Escalabilidad: Se puede escalar a cualquier tamaño sin perder calidad ni nitidez.
- Tamaño de Archivo Pequeño: Para gráficos simples, el tamaño del archivo SVG es mucho menor que el de un formato rasterizado.
- Editabilidad: Un archivo SVG se puede editar con cualquier editor de texto o software de diseño vectorial, ya que está basado en código.
- Animación: Los elementos dentro de un archivo SVG se pueden animar usando CSS o JavaScript, lo que lo hace muy versátil para gráficos interactivos.
Nivel Avanzado
Técnicamente, el SVG es un lenguaje de marcado basado en XML que describe gráficos vectoriales. La estructura de un archivo SVG es similar a la de un documento HTML, con etiquetas que definen las formas, los textos, los colores y las transformaciones.
Un ejemplo simple de código SVG es:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>Este código le dice al navegador que dibuje un círculo con un radio de 40 píxeles, centrado en las coordenadas (50,50), con un borde negro y relleno rojo.
El SVG es una herramienta poderosa en el desarrollo web moderno, ya que sus gráficos pueden:
- Ser insertados directamente en el HTML (
<svg>...</svg>). - Usarse como un archivo externo (
<img src="imagen.svg">). - Ser manipulados con JavaScript para cambiar sus propiedades o animarlos.
- Ser estilizados con CSS, lo que permite cambiar su color o tamaño sin editar el archivo original.
Debido a su naturaleza basada en vectores, SVG es la opción ideal para logotipos, iconos, gráficos interactivos e ilustraciones. Sin embargo, no es el formato adecuado para fotografías o imágenes con detalles complejos, ya que el tamaño del archivo SVG podría volverse prohibitivamente grande. La combinación de SVG con formatos rasterizados es una práctica común para optimizar el rendimiento y la calidad visual en los sitios web.
« Volver al índice del glosario