24/04/2013

SVG: imágenes inteligentes para la Web

SVG: imágenes inteligentes para la Web

Generalmente, los elementos gráficos que encontramos en la Web presentan formatos tradicionales, como JPG para las imágenes estáticas, PNG para las transparentes y GIF para las animadas. Las que cuentan con efectos de interactividad se basan en soluciones no siempre satisfactorias, como el clásico Adobe Flash o las herramientas nuevas de HTML5 y CSS3. Todos estos enfoques son fáciles de implementar, pero presentan inconvenientes cuando las necesidades a cubrir son algo complejas. Si usamos JPEG, GIF, PNG o Flash, el texto que pueda estar contenido en la imagen no será reconocido por los buscadores. Mientras tanto, el elemento canvas de HTML5 brinda una mejor posibilidad de indexación, pero esta característica no es soportada por todos los navegadores.

Sin embargo, desde 2001 existe una opción no tan conocida que resuelve estos y otros inconvenientes. SVG (Scalable Vector Graphics) es un formato para definir gráficos vectoriales bidimensionales a través de la sintaxis del lenguaje XML. Los elementos SVG no son mapas de bits estáticos ni objetos externos insertados: son gráficos interactivos que se integran perfectamente a la estructura de la página. Las imágenes en SVG ofrecen muchas ventajas:

  • No son mapas de bits, sino gráficos vectoriales. Estos tienen la ventaja de poder expandirse a gran tamaño sin sufrir grandes pérdidas de calidad (en términos menos formales, «no se pixelan»).
  • Como son definidas por código, su comportamiento es dinámico e interactivo. Por ejemplo, el texto de la imagen puede cambiar de acuerdo con la información que obtenga de una base de datos en tiempo real.
  • Son aceptadas por la mayoría de los navegadores, sin necesidad de instalar plugins.
  • Como tratan por separado al diseño y al contenido, el texto que puedan contener será indexado por los buscadores.
  • Tardan menos en cargar que un gráfico en Flash.
  • Son más fáciles de manipular y modificar que las imágenes en PNG, JPEG o GIF.

Por todas estas razones, SVG debería ser adoptado con mayor frecuencia, especialmente cuando se pretende presentar información con un formato especial, como el de las infografías.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce