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

En 1998 existían para el Consorcio Mundial de la Web (W3C) dos ca­n­di­da­tos po­te­n­cia­les para el lenguaje de marcado estándar para gráficos ve­c­to­ria­les de dos di­me­n­sio­nes basados en XML: mientras que Microsoft y Ma­cro­me­dia (hoy Adobe Systems) entre otros lanzaban el Vector Markup Language (VML), IBM, Adobe y otros in­tro­du­cían el Precision Graphics Markup Language (PGML). Sin embargo, el Consorcio no se decidió por ninguno de los dos, sino que optó por uni­fi­car­los en un solo lenguaje y el 4 de se­p­tie­m­bre de 2001 publicó el resultado en la re­co­me­n­da­ción “Scalable Vector Graphics (SVG) 1.0 Spe­ci­fi­ca­tion”, aunque no pudo sa­ti­s­fa­cer a todos los im­pli­ca­dos. Microsoft siguió uti­li­za­n­do durante mucho tiempo su propio lenguaje VML en sus apli­ca­cio­nes (Internet Explorer hasta la versión 9), mientras el formato SVG co­n­ti­nua­ba su carrera al es­tre­lla­to.

La presencia de SVG en do­cu­me­n­tos HTML ha aumentado sobre todo desde la evolución de los na­ve­ga­do­res de Internet, aunque el diseño re­s­po­n­si­vo también ha tenido un papel en ello, pues los gráficos de vectores despuntan es­pe­cia­l­me­n­te por su elevada es­ca­la­bi­li­dad en el diseño de proyectos mu­l­ti­di­s­po­si­ti­vo. 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 de­mue­s­tran los si­guie­n­tes factores:

• Archivos de tamaño reducido: ex­ce­p­tua­n­do aquellos más ela­bo­ra­dos, los gráficos en formato SVG se di­s­ti­n­guen por tener un tamaño muy reducido que se mantiene incluso cuando se amplían las imágenes. Esto garantiza el re­n­di­mie­n­to estable y ágil del servidor in­de­pe­n­die­n­te­me­n­te de los di­s­po­si­ti­vos que soliciten el archivo. A su vez, la carga más rápida de las imágenes también repercute en el po­si­cio­na­mie­n­to en bu­s­ca­do­res.

• Código abierto: el W3C ha creado SVG como estándar libre, por lo cual se puede utilizar sin li­mi­ta­cio­nes en cualquier pla­ta­fo­r­ma y en co­m­bi­na­ción con otros lenguajes XML.

• Ani­ma­cio­nes: los elementos SVG pueden animarse de di­fe­re­n­tes formas. Puede uti­li­zar­se el lenguaje SMIL (Sy­n­ch­ro­ni­zed Mu­l­ti­me­dia In­te­gra­tion Language) creado por el Consorcio, que ha in­te­rru­m­pi­do su de­sa­rro­llo. Con todo, SMIL nunca se ha im­ple­me­n­ta­do en IE o Edge y Chrome tampoco lo va a soportar en el futuro, así que se ha impuesto Ja­va­S­cri­pt para hacer que los elementos SVG reac­cio­nen a los clics o los mo­vi­mie­n­tos del ratón. Una tercera y limitada opción es la que re­pre­se­n­tan las pro­pie­da­des CSS “animation” y “motion-path”, que tampoco soportan todos los na­ve­ga­do­res.

• 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 ti­po­gra­fía y el tamaño de la fuente (entre muchos otros) pueden ajustarse en un archivo CSS separado o di­re­c­ta­me­n­te en el SVG a fin de ajustar su aspecto.

• Alta co­m­pa­ti­bi­li­dad: las grandes di­fe­re­n­cias entre las funciones de los distintos in­té­r­pre­tes tienen poca in­flue­n­cia en el re­n­de­ri­za­do de los gráficos, porque el formato SVG es co­m­pa­ti­ble con versiones an­te­rio­res y po­s­te­rio­res. En la práctica, cada navegador entrega la imagen en función de sus propias po­si­bi­li­da­des e ignora los elementos XML que no conoce sin ocasionar co­m­pli­ca­cio­nes más serias.

• Ac­ce­si­bi­li­dad web: los gráficos SVG están basados en texto y con ello son co­m­pa­ti­bles con lectores de pantalla y con todos los di­s­po­si­ti­vos que entiendan y puedan re­pro­du­cir código.

• Vi­sua­li­za­ción en código fuente: si el gráfico SVG está marcado en el documento HTML, puede editarse fá­ci­l­me­n­te en el editor de código.

Todos estos puntos fuertes de­mue­s­tran lo difícil que es para un webmaster pre­s­ci­n­dir del formato SVG. Los numerosos co­n­fli­c­tos con los na­ve­ga­do­res, durante años un argumento decisivo en contra de su apli­ca­ción, ya forman parte del pasado y hoy parece que el formato gráfico no tiene más que ventajas en cuanto a usa­bi­li­dad, SEO, ac­ce­si­bi­li­dad web, etc. Sin embargo, como tan a menudo, tampoco es oro todo lo que reluce. Un in­co­n­ve­nie­n­te si­g­ni­fi­ca­ti­vo de las imágenes ve­c­to­ria­les es la reducida variedad de programas di­s­po­ni­bles porque, mientras que para elaborar gráficos de píxeles se puede escoger li­bre­me­n­te entre una gran cantidad de programas de edición de imagen, para crear, almacenar y convertir archivos SVG se requieren he­rra­mie­n­tas es­pe­cí­fi­cas como Adobe Illu­s­tra­tor o Inkscape. Como co­n­se­cue­n­cia, 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 de­s­ve­n­ta­jas de este formato de imagen:

• Elevados re­qui­si­tos al cliente: si bien HTML5 ha resuelto el problema de las ex­te­n­sio­nes, también ha de­s­pla­za­do el proceso de re­n­de­ri­za­do al navegador. De esta forma, la su­pue­s­ta­me­n­te ventajosa carga más rápida, resultado de la de­s­co­n­ge­s­tió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 su­fi­cie­n­te potencia de cómputo, los gráficos ve­c­to­ria­les más complejos pueden ocasionar fá­ci­l­me­n­te una entrega diferida de la página. Para an­ti­ci­par­se a este problema se ha de optimizar el código del SVG eli­mi­na­n­do elementos su­pe­r­fluos.

• Opciones limitadas de apli­ca­ción: debido a la te­c­no­lo­gí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 ela­bo­ra­das, que han de poderse cambiar a po­s­te­rio­ri, solo se pueden realizar con ayuda de una es­tru­c­tu­ra más compleja con su­pe­r­fi­cies cla­ra­me­n­te di­fe­re­n­cia­das. En el caso de gráficos hi­per­rea­li­s­tas, el formato SVG topa pronto con sus li­mi­ta­cio­nes por su pobreza de detalles (pro­fu­n­di­dad, sombreado, efectos de luz, etc.).

Si quieres utilizar gráficos ve­c­to­ria­les 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 in­te­gra­ción allí donde mejor pueden demostrar sus ventajas técnicas. A la hora de re­pre­se­n­tar 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 ca­ra­c­te­rí­s­ti­cas es­tru­c­tu­ra­les y si­n­tá­c­ti­cas de cualquier otro documento XML: el código se es­tru­c­tu­ra je­rá­r­qui­ca­me­n­te (esquema arbóreo) y contiene elementos y atributos. Los elementos se marcan con ayuda de pares de etiquetas co­m­pue­s­tos 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 in­fo­r­ma­ció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 in­s­tru­c­cio­nes y co­me­n­ta­rios.

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 de­fi­ni­ción del tipo de documento y la de­cla­ra­ción XML para definir el tipo, la versión y la co­di­fi­ca­ción del documento su­b­ya­ce­n­te.

Como se dijo, hoy ya no es necesario instalar ex­te­n­sio­nes para insertar gráficos ve­c­to­ria­les en un proyecto online. En lugar de ello se integran di­re­c­ta­me­n­te en la hoja de HTML uti­li­za­n­do diversos métodos que pre­se­n­ta­mos a co­n­ti­nua­ció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 des­apa­re­ce 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 au­to­má­ti­ca en este CMS para insertar gráficos SVG.

Marcando a <img> con in­di­ca­cio­nes de CSS para un diseño re­s­po­n­si­vo, 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 apli­ca­ción de Ja­va­S­cri­pt.

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 di­fe­re­n­cia de la etiqueta “image”, <object> permite incluir una al­te­r­na­ti­va, 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 ani­ma­cio­nes con Ja­va­S­cri­pt. Con todo, esta forma de im­ple­me­n­ta­ción tiene escaso soporte en los gestores de contenido más uti­li­za­dos, lo que dificulta en parte su apli­ca­ción.

El código para insertar un SVG con la etiqueta <object> e incluir una imagen al­te­r­na­ti­va tiene una sintaxis como esta:

Los Inline Frames, más conocidos como iFrames, están di­s­po­ni­bles desde HTML4 y ya cuentan con el soporte de todos los na­ve­ga­do­res. Los we­b­ma­s­te­rs 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 ve­c­to­ria­les con Ja­va­S­cri­pt y con enlaces, así como definir imágenes o textos de reserva y se pueden im­ple­me­n­tar en todos los dominios. No obstante, aun cuando los sistemas de gestión de co­n­te­ni­dos más usuales soportan esta te­c­no­lo­gía, la creación de un iFrame re­s­po­n­si­vo sobre todo va ligada a una enorme inversión de trabajo.

El ejemplo que sigue muestra la es­tru­c­tu­ra general de un iFrame de SVG que muestra un gráfico al­te­r­na­ti­vo en formato PNG en caso de in­co­m­pa­ti­bi­li­dad:

Un gráfico vectorial también puede in­te­grar­se como imagen de fondo con CSS exac­ta­me­n­te igual que una imagen de píxeles, pero con la ventaja de la es­ca­la­bi­li­dad sin pérdidas ca­ra­c­te­rí­s­ti­ca 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 co­n­te­ne­dor 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 ex­pre­sa­me­n­te para los gráficos ve­c­to­ria­les, se puede integrar el gráfico di­re­c­ta­me­n­te 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 Ja­va­S­cri­pt. Esta etiqueta también permite añadir enlaces al gráfico. Aun así, este método esconde una clara de­s­ve­n­ta­ja a la hora de integrar archivos externos: si insertas gráficos ve­c­to­ria­les muy ela­bo­ra­dos, las líneas de código adi­cio­na­les 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 apli­ca­ció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 co­n­si­de­ra­do una al­te­r­na­ti­va elegante y efectiva a formatos más ex­te­n­di­dos en el de­sa­rro­llo web, como PNG, JPEG o GIF, pero co­n­lle­va­ba más trabajo como resultado en primera instancia de su in­co­m­pa­ti­bi­li­dad con algunos na­ve­ga­do­res muy uti­li­za­dos, como el IE de Microsoft. En­tre­ta­n­to, los archivos SVG se insertan tan rá­pi­da­me­n­te como cualquier otro tipo de archivo de imagen y re­pre­se­n­tan una elección excelente para muchos elementos visuales de una web, pues resultan co­n­vi­n­ce­n­tes a la hora de insertar iconos, botones, logos y ti­po­gra­fías re­s­po­n­si­vas y ac­ce­si­bles que pueden mo­di­fi­car­se po­s­te­rio­r­me­n­te 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 co­n­te­ni­dos incluyen para poder hacerlo. En cambio, el diseño en sí de gráficos ve­c­to­ria­les sigue siendo una labor para di­se­ña­do­res pro­fe­sio­na­les. No solo se necesitan las he­rra­mie­n­tas correctas, sino también ex­pe­rie­n­cia 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 apro­ve­char las ventajas de este lenguaje de marcado tan práctico.