SVG, gráfico vectorial escalable

SVG son las iniciales de Scalable Vector Graphic (Gráfico Vectorial Escalable), un nuevo formato de imagen que soporta HTML5 y nos ofrece gráficos vectoriales que pueden redimensionarse hasta el infinito sin perder calidad ni deformarse. Esta característica hace que los vectores sean perfectos para el responsive design, ya que podemos redimensionar iconos o imágenes con gran facilidad.

 

Las imágenes vectoriales son definidas usando algoritmos, definiciones de formas y rutas que el ordenador puede usar para calcular cómo debe verse la imagen cuando se renderice en pantalla. Los algoritmos son también muy fáciles de escalar tanto para ampliar como para reducir su tamaño. SVG es un formato abierto, estándar y basado en XML. De hecho una imagen de tipo SVG realmente es un XML al que se ha añadido la extensión SVG, en vez de la típica XML. Con una imagen SVG podemos hacer todo lo que hacemos en Flash pero sin que tengamos que depender de la compañía Macromedia.

 

Es por eso que SVG es el estándar propuesto en 2001 por el consorcio W3C para la representación de gráficos vectoriales en la red, su tiempo de renderizado es semejante al de cualquier otro formato vectorial, y muchos proyectos Open Source, como Wikipedia o Commons, lo utilizan masivamente.

 

Una archivo SVG se puede añadir al HTML de 3 formas:

 

1/ Con la etiqueta  SVG puede ser incrustado como cualquier otro tipo de imagen, en una etiqueta de tipo img, dentro de una página web. En la propiedad ‘src’ de la etiqueta img, sólo debemos poner la ruta de la imagen SVG que queramos utilizar, y se mostrará sin problemas en cualquier navegador moderno, siempre y cuando la página web utilizada sea una página HTML5.

 

2/ La etiqueta es la forma más básica de incluir un fichero SVG externo. La principal ventaja de usar esta etiqueta es que tiene un mecanismo natural de respaldo para visualizar un contenido alternativo en caso de que el contenido SVG no sea visualizado. Esta etiqueta requiere la definición de un atributo data que contiene la ubicación del fichero SVG, normalmente una dirección relativa. Es muy recomendable definir el atributo type ya que permite que los navegadores no descarguen aquellos contenidos que no reconocen. En el caso de contenidos SVG, el valor que hay que dar a este atributo es “image/svg+xml”. Si el navegador no puede reproducir el contenido del archivo SVG, entonces el navegador intentará visualizar el contenido situado entre la etiqueta de apertura y la etiqueta de cierre . En este caso, una buena idea es colocar ahí una versión en formato PNG del dibujo SVG.

 

3/ Con la etiqueta  También se puede abrir el archivo SVG en un editor de texto, copiar el código SVG y pegarlo en el documento HTML (svg inline) asegurándonos que el snippet de código empieza y termina con las etiquetas . Añadir un SVG inline elimina una petición HTTP y por tanto reduce el tiempo de carga

 

Para crear imágenes SVG, la mayoría de personas usan un editor de gráficos vectoriales como Inkscape o Illustrator.

 

Los gráficos vectoriales son muy útiles en muchas circunstancias porque son altamente escalables, un mismo archivo se puede presentar en varios tamaños (móvil, tablet, ordenador, TV, etc ). Reducimos así el número de imagenes necesarias. Sin embargo, el tamaño de los archivos SVG puede ser bastante mayor al de los típicos jpg, en función de la cantidad de metadatos incluidos en el código XML, especialmente si el archivo incluye gradientes y animaciones. Para compensar esto, hay un estándar de compresión de archivos SVG, el gzip, que reduce el peso del archivo en un 50% sin apenas perder calidad. Ayuda a reducir el tamaño del archivo de cara a un móvil.
Anuncios