Psychotik

solucionando marrones desde 2003

El formato SVG, ¿qué es y por qué utilizarlo?

Pertenece a  Artículos, Destacados  el 5 Junio
El formato SVG, ¿qué es y por qué utilizarlo?

Características

El formato SVG (Scalable Vector Graphic) es un formato de imagen vectorial, es decir, no pierde calidad al ser escalado a cualquier tamaño, además de esta cualidad de por si importante, también se añade el hecho de que pesa poco y que a tamaños reducidos ofrece más definición que otros formatos como .jpg o .png. Resumiendo, es como utilizar un archivo Corel o Illustrator pero nuestro navegador lo leerá sin problema, plugins ni nada extra.

Actualmente ya es un formato tolerado por la mayoría de navegadores, es un formato construido en base a xml por lo que nos permite trabajar con css, podemos por ejemplo hacer un cambio de color, usar efectos, … al hacer :hover y funcionará en nuestro .svg. En el siguiente ejemplo podéis ver como funciona con transiciones: CSSDeck

Diseño responsive

Como formato es muy interesante ya que nos permite trabajar, por ejemplo, con iconos que se adapten perfectamente a cualquier resolución de pantalla, es decir, es un formato ideal a la hora de plantear diseños responsive, ya no solo a nivel escalable como comentaba al comienzo, si no a nivel de diseño, ya que podemos tener distintos diseños según la resolución que el usuario esté utilizando.

Podéis ver un ejemplo en funcionamiento gracias a: Resposive Icons

Para textos…

El svg también es válido para crear tipografías o utilizar textos vectorizados, al ser un xml los buscadores generalmente lo leen, por lo que además de poder añadir textos estéticamente personalizados será accesibles, si sois aficionados a crear tipografías o utilizar textos diseñados por vosotros mismos en determinadas partes del diseño, no lo dudéis, mejor este formato que una imagen clásica.

Como véis el formato cuando trabajamos, por ejemplo, con diseños flat, es más que interesante por todas las posibilidades y ventajas que tiene con respeto a los formatos tradicionales para imágenes.


Volver atrás

Una respuesta a “El formato SVG, ¿qué es y por qué utilizarlo?”

  1. Carlos Bigurra dice:

    Muy cierto esto del SVG, que con la entrada del HTML5 y CSS3 se le ve mucho futuro. Así que ¡a experimentar! a ver que nuevas salen. Gracias por tan interesantes articulos Psychokit…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »