¿Qué es SVG?

El termino SVG proviene del inglés Scalable Vector Graphics los cuales no son más que Gráficos Vectoriales Redimensionables, los SVG describen las imágenes como formas, trazados, texto y efectos de filtro. Los archivos resultantes son compactos y ofrecen gráficos de alta calidad tanto en Internet, en impresoras e incluso en dispositivos portátiles y con recursos limitados.

¿Qué ventajas tiene el formato SVG?

Una de las grandes ventajas que tiene el formato SVG es que está totalmente basado en XML y se puede comprimir fácilmente en las transmisiones. Los archivos SVG se pueden usar de varias formas: como si fuese un elemento más en la página HTML (copiando tal cual el SVG), añadiendo un objeto SVG y añadiendo una imagen con formato SVG además con el formato SVG, se puede utilizar XML y JavaScript para crear gráficos web que respondan a las acciones del usuario con efectos sofisticados, como el resaltado, la información de herramientas, el audio y las animaciones.

Con una imagen SVG los usuarios pueden aumentar la vista en la pantalla sin tener que sacrificar el enfoque, el detalle o la claridad. Además, el formato SVG ofrece mejor compatibilidad con texto y colores, lo que garantiza que los usuarios vean las imágenes tal y como aparecen en la mesa de trabajo de Illustrator.

¿Cuándo se dio a conocer el SVG?

En septiembre de 2001 W3C  da la recomendación sobre el formato SVG, actualmente el formato SVG ha sido incluido de forma nativa en el navegador web del W3C Amaya. Las versiones 1.5 y posteriores de Mozilla Firefox soportan gráficos hechos con SVG, así como el navegador Opera que desde su versión 8 ha implementado SVG 1.1 Tiny en su núcleo.

Además los Navegadores como Google Chrome, Safari e Internet Explorer 9 también son capaces de mostrar imágenes en formato SVG sin necesidad de complementos externos. Otros navegadores web, como versiones anteriores a la 9 de Internet Explorer, necesitan un conector o plug-in para poder mostrar los archivos SVG.

¿Cuáles son las diferencias entre una imagen SVG y una imagen normal?

La gran diferencia entre las imágenes vectoriales SVG y las imágenes de mapa de bits (como .jpg, .png o .gif) es que las SVG almacenan líneas, curvas, degradados y el resto de información necesaria para crear la imagen y el propio programa que lo visualiza es el que crea la información de cada píxel mientras que las imágenes de mapa de bits (como .jpg, .png o .gif) almacenan la información de todos sus píxeles.

Esta característica hace que los vectores SVG  sean perfectos para el Responsive Design, ya que se puede redimensionar los iconos o imágenes sin perder calidad.

¿Cómo usar una imagen en formato SVG?

Como ya he comentado, hay distintas formas de usar las imágenes SVG, pero la más simple es la de usar un archivo SVG como si de una imagen cualquiera se tratase.

<!– Como imagen normal –>

<img src=»copa.svg»>

<!– Como objeto externo –>

<object data=»copa.svg» type=»image/svg+xml»>

<!– Te permite mostrar un sustituto si no tiene soporte o no encuentra el archivo –>

SVG no soportado.

</object>

<!– Añadir en línea el SVG –>

<svg version=»1.1″ xmlns=»http://www.w3.org/2000/svg»>

<path d=»[…]»/>

</svg>

Los archivos SVG también se pueden usar como imágenes de fondo a través de CSS, igual que hacemos con otra imagen, lo que nos puede ayudar a reducir el tamaño de los archivos que recibe nuestra página para funcionar y así evitamos usar grandes imágenes de fondo que son muy pesadas y vuelven lenta nuestra página.