Cómo insertar un gráfico SVG en una web

En 1998 existían para el Consorcio Mundial de la Web (W3C) dos candidatos potenciales para el lenguaje de marcado estándar para gráficos vectoriales de dos dimensiones basados en XML: mientras que Microsoft y Macromedia (hoy Adobe Systems) entre otros lanzaban el Vector Markup Language (VML), IBM, Adobe y otros introducían el Precision Graphics Markup Language (PGML). Sin embargo, el Consorcio no se decidió por ninguno de los dos, sino que optó por unificarlos en un solo lenguaje y el 4 de septiembre de 2001 publicó el resultado en la recomendación “Scalable Vector Graphics (SVG) 1.0 Specification”, aunque no pudo satisfacer a todos los implicados. Microsoft siguió utilizando durante mucho tiempo su propio lenguaje VML en sus aplicaciones (Internet Explorer hasta la versión 9), mientras el formato SVG continuaba su carrera al estrellato.

La presencia de SVG en documentos HTML ha aumentado sobre todo desde la evolución de los navegadores de Internet, aunque el diseño responsivo también ha tenido un papel en ello, pues los gráficos de vectores despuntan especialmente por su elevada escalabilidad en el diseño de proyectos multidispositivo. Con todo, este no es el único motivo que impulsa el empleo de SVG en el diseño gráfico de las páginas web, como demuestran los siguientes factores:

• Archivos de tamaño reducido: exceptuando aquellos más elaborados, los gráficos en formato SVG se distinguen por tener un tamaño muy reducido que se mantiene incluso cuando se amplían las imágenes. Esto garantiza el rendimiento estable y ágil del servidor independientemente de los dispositivos que soliciten el archivo. A su vez, la carga más rápida de las imágenes también repercute en el posicionamiento en buscadores.

• Código abierto: el W3C ha creado SVG como estándar libre, por lo cual se puede utilizar sin limitaciones en cualquier plataforma y en combinación con otros lenguajes XML.

• Animaciones: los elementos SVG pueden animarse de diferentes formas. Puede utilizarse el lenguaje SMIL (Synchronized Multimedia Integration Language) creado por el Consorcio, que ha interrumpido su desarrollo. Con todo, SMIL nunca se ha implementado en IE o Edge y Chrome tampoco lo va a soportar en el futuro, así que se ha impuesto JavaScript para hacer que los elementos SVG reaccionen a los clics o los movimientos del ratón. Una tercera y limitada opción es la que representan las propiedades CSS “animation” y “motion-path”, que tampoco soportan todos los navegadores.

• Se puede editar con CSS: los gráficos en formato SVG se pueden modificar con el lenguaje de hojas de estilo CSS. Atributos como el color, los filtros, la tipografía y el tamaño de la fuente (entre muchos otros) pueden ajustarse en un archivo CSS separado o directamente en el SVG a fin de ajustar su aspecto.

• Alta compatibilidad: las grandes diferencias entre las funciones de los distintos intérpretes tienen poca influencia en el renderizado de los gráficos, porque el formato SVG es compatible con versiones anteriores y posteriores. En la práctica, cada navegador entrega la imagen en función de sus propias posibilidades e ignora los elementos XML que no conoce sin ocasionar complicaciones más serias.

• Accesibilidad web: los gráficos SVG están basados en texto y con ello son compatibles con lectores de pantalla y con todos los dispositivos que entiendan y puedan reproducir código.

• Visualización en código fuente: si el gráfico SVG está marcado en el documento HTML, puede editarse fácilmente en el editor de código.

Todos estos puntos fuertes demuestran lo difícil que es para un webmaster prescindir del formato SVG. Los numerosos conflictos con los navegadores, durante años un argumento decisivo en contra de su aplicación, ya forman parte del pasado y hoy parece que el formato gráfico no tiene más que ventajas en cuanto a usabilidad, SEO, accesibilidad web, etc. Sin embargo, como tan a menudo, tampoco es oro todo lo que reluce. Un inconveniente significativo de las imágenes vectoriales es la reducida variedad de programas disponibles porque, mientras que para elaborar gráficos de píxeles se puede escoger libremente entre una gran cantidad de programas de edición de imagen, para crear, almacenar y convertir archivos SVG se requieren herramientas específicas como Adobe Illustrator o Inkscape. Como consecuencia, trabajar con gráficos SVG puede ser al principio más complejo y requerir algo más de tiempo. Además de esta, dos son las desventajas de este formato de imagen:

• Elevados requisitos al cliente: si bien HTML5 ha resuelto el problema de las extensiones, también ha desplazado el proceso de renderizado al navegador. De esta forma, la supuestamente ventajosa carga más rápida, resultado de la descongestión del servidor y del liviano peso de los archivos, puede también volverse en contra porque, si el ordenador del usuario no cuenta con la suficiente potencia de cómputo, los gráficos vectoriales más complejos pueden ocasionar fácilmente una entrega diferida de la página. Para anticiparse a este problema se ha de optimizar el código del SVG eliminando elementos superfluos.

• Opciones limitadas de aplicación: debido a la tecnología que lo sustenta, SVG es la medida de todas las cosas cuando se trata de diseñar y escalar elementos sencillos (gráficos, logos, fuentes, etc.). En cambio, aquellas imágenes más elaboradas, que han de poderse cambiar a posteriori, solo se pueden realizar con ayuda de una estructura más compleja con superficies claramente diferenciadas. En el caso de gráficos hiperrealistas, el formato SVG topa pronto con sus limitaciones por su pobreza de detalles (profundidad, sombreado, efectos de luz, etc.).

Si quieres utilizar gráficos vectoriales en tu proyecto, vas a tener que renunciar a imágenes complejas a no ser que quieras dedicar tu tiempo a crearlas desde cero o a copiarlas. Planifica su integración allí donde mejor pueden demostrar sus ventajas técnicas. A la hora de representar imágenes complejas, decántate como hasta ahora por los píxeles.

Al estar escritos en XML, los elementos SVG están sujetos a las mismas características estructurales y sintácticas de cualquier otro documento XML: el código se estructura jerárquicamente (esquema arbóreo) y contiene elementos y atributos. Los elementos se marcan con ayuda de pares de etiquetas compuestos por una de inicio (<etiqueta>) y otra de cierre (</etiqueta>) o con las llamadas “etiquetas vacías”, que no encierran ningún texto y se abren y cierran en el mismo elemento (<etiqueta/>). Los atributos contienen información adicional sobre los elementos y figuran dentro de una etiqueta de inicio o de una vacía como par atributo-valor (<etiqueta atributo ="valor">). XML admite instrucciones y comentarios.

Cada documento SVG-XML tiene que comenzar con un elemento en el nivel más alto (<svg>) bajo el cual se escalonan el resto de elementos. Puede usarse la definición del tipo de documento y la declaración XML para definir el tipo, la versión y la codificación del documento subyacente.

Como se dijo, hoy ya no es necesario instalar extensiones para insertar gráficos vectoriales en un proyecto online. En lugar de ello se integran directamente en la hoja de HTML utilizando diversos métodos que presentamos a continuación.

La etiqueta de HTML <img> es el estándar universal para añadir archivos de imagen en una web y no necesita contenido ni etiqueta de cierre, así como que también desaparece la barra de cierre (/). La sintaxis de este método es la más conocida, motivo por el cual está integrada en WordPress y se utiliza de forma automática en este CMS para insertar gráficos SVG.

Marcando a <img> con indicaciones de CSS para un diseño responsivo, el gráfico se adapta a todos los tamaños de pantalla sin requerir más ajustes. Con este método, sin embargo, no se puede vincular el gráfico a un enlace o a una aplicación de JavaScript.

Para insertar un gráfico SVG con la etiqueta <img> necesitas una línea de código como esta:

La etiqueta <object> permite insertar elementos activos en una web, entre los cuales se incluyen applets de Java, vídeos Flash o tablas de Excel, pero también gráficos en formato SVG. A diferencia de la etiqueta “image”, <object> permite incluir una alternativa, que puede ser un mensaje de texto o un gráfico de píxeles, para que se muestre al usuario en caso de que el navegador no pueda cargar es archivo. También permite agregar enlaces a las formas en el código mismo del archivo gráfico y crear animaciones con JavaScript. Con todo, esta forma de implementación tiene escaso soporte en los gestores de contenido más utilizados, lo que dificulta en parte su aplicación.

El código para insertar un SVG con la etiqueta <object> e incluir una imagen alternativa tiene una sintaxis como esta:

Los Inline Frames, más conocidos como iFrames, están disponibles desde HTML4 y ya cuentan con el soporte de todos los navegadores. Los webmasters utilizan estos elementos en primera instancia para agregar contenido externo de otras páginas como vídeos de YouTube o mapas de Google, pero también son capaces de presentar archivos en formato SVG. Como <object>, los iFrames permiten vincular gráficos vectoriales con JavaScript y con enlaces, así como definir imágenes o textos de reserva y se pueden implementar en todos los dominios. No obstante, aun cuando los sistemas de gestión de contenidos más usuales soportan esta tecnología, la creación de un iFrame responsivo sobre todo va ligada a una enorme inversión de trabajo.

El ejemplo que sigue muestra la estructura general de un iFrame de SVG que muestra un gráfico alternativo en formato PNG en caso de incompatibilidad:

Un gráfico vectorial también puede integrarse como imagen de fondo con CSS exactamente igual que una imagen de píxeles, pero con la ventaja de la escalabilidad sin pérdidas característica del formato SVG. La imagen se adapta así al viewport, que es como se conoce a la parte de pantalla que visualiza el usuario en cada terminal sin que la calidad de la imagen se modifique.

Si ya tienes un gráfico de vectores que quieres utilizar como imagen de fondo, crea un contenedor div:

En lugar de recurrir a etiquetas de HTML que enlazan al lugar externo en que se encuentra el archivo SVG, con la etiqueta <svg> de HTML5, reservada expresamente para los gráficos vectoriales, se puede integrar el gráfico directamente en el código. Con este SVG “en línea”, ya no es necesario cargar un archivo externo y, además, se tiene la ventaja de poder editarlo con CSS y JavaScript. Esta etiqueta también permite añadir enlaces al gráfico. Aun así, este método esconde una clara desventaja a la hora de integrar archivos externos: si insertas gráficos vectoriales muy elaborados, las líneas de código adicionales pueden ocasionar una pérdida de claridad en el documento HTML y, si bien se pueden abreviar, lo mejor en estos casos es recurrir a un gráfico externo, lo que también es de aplicación cuando un gráfico aparece varias veces en la misma página.

En este ejemplo se ha insertado una versión en SVG de la bandera italiana en una hoja de HTML:

Durante mucho tiempo, el formato SVG fue considerado una alternativa elegante y efectiva a formatos más extendidos en el desarrollo web, como PNG, JPEG o GIF, pero conllevaba más trabajo como resultado en primera instancia de su incompatibilidad con algunos navegadores muy utilizados, como el IE de Microsoft. Entretanto, los archivos SVG se insertan tan rápidamente como cualquier otro tipo de archivo de imagen y representan una elección excelente para muchos elementos visuales de una web, pues resultan convincentes a la hora de insertar iconos, botones, logos y tipografías responsivas y accesibles que pueden modificarse posteriormente si es necesario.

Hoy en día, trabajar con gráficos en formato SVG es muy fácil incluso para los menos expertos gracias a sus variadas formas de inserción y a las funciones que los sistemas de gestión de contenidos incluyen para poder hacerlo. En cambio, el diseño en sí de gráficos vectoriales sigue siendo una labor para diseñadores profesionales. No solo se necesitan las herramientas correctas, sino también experiencia en el trabajo con vectores para extraerle el máximo partido a este formato. Así, con cierta ambición y la idea adecuada, es posible aprovechar las ventajas de este lenguaje de marcado tan práctico.