Los diseñadores web tenemos que convivir cada día con los caprichos del mercado. Cuando se produce el anuncio de un nuevo o mejor dispositivo sentimos una doble sensación, por una parte el deseo de tenerlo en las manos y por otra el temor de cómo afectará esto a nuestro trabajo.

Ahora que los tablets están tan extendidos, os voy a comentar un truco para hacer que los logotipos de vuestras webs, se vean con una nitidez increíble.

Se trata de utilizar el formato SVG (Scalable Vector Graphic) en lugar de PNG o JPG. Este tipo de archivo es compatible con navegadores que soporten HTML5.Es decir, tendremos un SVG que se mostrará en tablets, smartphones y navegadores modernos, y una versión PNG para navegadores anteriores.

Este tipo de archivo se genera con un programa vectorial como por ejemplo Illustrator. Tendrás que crearte un documento con el tamaño necesario y tener tu logotipo dentro. Al guardar guardas dos versiones, una en SVG y otra en PNG.

El código para utilizar un SVG en tu HTML sería el siguiente:

<object data="logo.svg" type="image/svg+xml"><img src="logo.png" />< / object>