27 May

¡Adiós al JPG, GIF y PNG!, Formato SVG para utilizar vectores en la web
Alejandro Fernández

SVG, las siglas de “Scalable Vector Graphics”, es un nuevo formato creado en el año 2001, que en estos últimos años está tomando cada vez más fuerza. La gracia de este formato es que permite utilizar vectores en la web en lugar de imágenes, para que las mismas no pierdan calidad en pantallas más grandes (o más pequeñas), evitando el horrible (y típico) pixeleo. ¿Cuál es la idea de esto?, cada vez necesitamos más que todo se vea en HD, en cualquier pantalla (ya sea laptop, smartphone, tablet, etc..), por lo mismo se necesita un formato Ad-hoc a las nuevas tecnologías.

Hagamos un pequeño experimento para entender la diferencia del formato SVG. A continuación subiré la misma imagen, en primer lugar en formato tradicional JPG, y en segundo lugar en el novedoso formato SVG. Prueba agrandando y achicando la pantalla (en Windows presionando Ctrl+ o Ctrl-), observando cómo se pixelea en cada caso:

Imagen en formato SVG:

Imagen en formato JPG:

comparacionSVG

¿Genial, no?.

Para convertir archivos .EPS o .AI a .SVG, debes abrirlos en Adobe Illustrator, desagrupar todas las capas, luego poner “Save as” y seleccionar “SVG”. Otra alternativa (si no tienes Illustrator), es utilizar el software “GSView” (http://pages.cs.wisc.edu/~ghost/gsview/), con el cual abres el EPS o AI, seleccionas “Edit” y luego “convert to vector”.

Para convertir un vector desde PSD a SVG. Primero debes guardar la imagen vectorizada (haciendo click derecho y poniendo “Convert to shape”), luego la guardas como .EPS y la abres con Illustrator. Luego realizas el párrafo anterior.

Para utilizar SVG en HTML, lo más fácil es utilizar el código “embed”, de la siguiente forma: “< embed type="image/svg+xml" src="URL del archivo.svg" / >”

Un sitio donde puedes descargar varios SVGs listos: http://svg-wow.org/

¡No olvides compartir!

Get Started Now With Shutterstock

Lo + nuevo

  • ¿Cómo armar un excelente Brief? Aquí las claves
  • Guía básica de Publicidad en Facebook (Parte 2)
  • Guía básica de Publicidad en Facebook (parte 1)