Tutorial HTML: Imágenes vectoriales (svg)

Las imágenes vectoriales o SVG (Scalable Vector Graphics) son una forma de representar imágenes digitales a través de una serie de instrucciones que trazan formas y colores. A diferencia de las imágenes de mapa de bits, como JPG, PNG y GIF, que representan una imagen como una cuadrícula de píxeles individuales, las imágenes vectoriales son resistentes a la distorsión cuando se escalan a diferentes tamaños.

SVG es un lenguaje XML que se utiliza para describir gráficos bidimensionales en vector. Este lenguaje es interpretado por el navegador y puede ser incrustado directamente en el código HTML, se puede manipular con JavaScript y CSS al igual que cualquier otro elemento HTML, esto proporciona una flexibilidad y potencia muy útiles.

Ejemplos de SVG en HTML

Para agregar SVG en HTML, se utiliza la etiqueta <svg>. A continuación, se muestra un ejemplo simple de cómo utilizar la etiqueta SVG para dibujar un círculo:

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

En este ejemplo, la etiqueta <svg> crea el espacio de trabajo para el gráfico, mientras que la etiqueta <circle> dibuja un círculo dentro de ese espacio. Los atributos cx y cy determinan el centro del círculo, mientras que r define el radio del círculo. Las propiedades stroke, stroke-width y fill controlan el color del borde, el ancho del borde y el color de relleno del círculo, respectivamente.

Es posible crear formas más complejas utilizando otras etiquetas dentro de la etiqueta <svg>, como <rect>, <ellipse>, <line>, <polyline>, <polygon>, y <path>.

A continuación, se muestra un ejemplo de un rectángulo y una línea:

<svg width="400" height="180">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

En el ejemplo anterior, la etiqueta <rect> se utiliza para dibujar un rectángulo y la etiqueta <line> se utiliza para dibujar una línea.

El SVG también puede ser usado para crear gráficos interactivos. Por ejemplo, puedes cambiar el color de un círculo cuando el usuario pasa el cursor sobre él utilizando CSS y SVG:

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

<style>
.circle:hover {
    fill: blue;
}
</style>

En este ejemplo, la regla CSS .circle:hover cambia el color de relleno del círculo a azul cuando el usuario pasa el cursor sobre él.

Ventajas y desventajas del SVG

Una ventaja importante de las imágenes SVG es que son escalables sin perder calidad. Esto es porque las imágenes SVG están formadas por vectores, no por píxeles, por lo que pueden ser ampliadas o reducidas sin distorsión. Además, las imágenes SVG suelen tener archivos más pequeños que las imágenes de mapa de bits, lo que puede ayudar a mejorar el rendimiento de una página web.

Sin embargo, las imágenes SVG también tienen algunas desventajas. Pueden ser más difíciles de crear que las imágenes de mapa de bits, especialmente para las imágenes más complejas. Además, aunque todos los navegadores modernos soportan SVG, algunos navegadores más antiguos no lo hacen.

En resumen, SVG es una poderosa herramienta para la creación de gráficos vectoriales en la web. Proporciona una gran flexibilidad y control sobre la apariencia de los gráficos, y puede ser una excelente opción para los gráficos que necesitan ser escalables.