was successfully added to your cart.

En el artículo de la semana pasada abordamos el tema de la exportación de recursos gráficos en formato SVG para ser utilizados en tus proyectos Web y cuáles son las ventajas más importantes de trabajar de esta manera. Hoy te explicaré las diferentes alternativas que tienes para incorporar tus imágenes SVG a través de HTML + CSS para ser utilizados en el mundo real.

Consideraciones previas

Como ya lo he mencionado con anterioridad, el formato SVG tiene una larga historia detrás; sin embargo, es muy reciente la intercompatibilidad total de este formato en los navegadores comunes. Debido a su naturaleza vectorial, SVG presenta algunas características de uso que no existen en los formatos de mapa de bits (como JPG y PNG).

La primera de ellas es que, cuando incorporas una imagen en este formato directamente en HTML, automáticamente se mostrará del tamaño entero del área en que esté contenida, ¿por qué? simplemente porque se trata de una imagen que no cuenta con un tamaño establecido, por ello tendremos que definirlo  manualmente todo el tiempo.

La segunda se deriva de la compatibilidad con navegadores. Pese a que todos los navegadores actuales las manipulan con facilidad, en la versión 7 de iOS (tanto para iPhone como para iPad) éste formato no era 100% compatible, al igual que en la versión 5 del navegador Safari para Windows. De hecho, esa fue la última versión que Apple desarrolló para el sistema operativo de Microsoft (una versión muy inestable, por cierto), pero ¿quién usa Safari en Windows? técnicamente nadie, y menos con ese retraso de versiones tan abismal.

Una tercera consideración, que es bastante relevante, es una limitación en la funcionalidad de imágenes como sprites en proyectos Web. En los tiempos que corren es muy, pero muy común, encontrar sitios que tienen un solo archivo PNG que contiene todos los gráficos de íconos, logos, flechas y demás recursos gráficos del sitio completo. Esto aporta muchas ventajas de rendimiento y experiencia de usuario; sin embargo, el formato SVG no puede utilizarse de esta manera porque los navegadores generan conflictos al tratar de establecer al gráfico completo como fondo y crear desplazamientos con CSS. Ló único que debes tomar en cuenta es que, si necesitas irremediablemente utilizar una imagen de sprites, no podrás hacerlo con SVG, pero pese a que parece que esto es una señal del apocalipsis, el problema no es tan grave debido a la flexibilidad de uso del formato.

Dicho lo anterior, prosigamos con las diferentes alternativas para incluir imágenes SVG en tus proyectos.

1. Con la etiqueta IMG en HTML

Esta es la forma más simple para incluir archivos SVG en tu sitio. Al igual que cualquier otra imagen, bastará con crear un elemento img y establecer la ruta de la imagen que deseas incluir en tu código.

Algo a tomar en cuenta es que, cuando utilizas este método, tu gráfico adoptará el 100% del espacio disponible y, la mayoría de las veces, se verá gigante. La solución es tan simple como agregar los atributos width y height al elemento img para definir un tamaño fijo. Regularmente bastará con indicar sólamente una de estas dos medidas porque el navegador automáticamente ajustará el tamaño para que no se pierda la relación de aspecto y tu gráfico no se desproporcione.

Lo positivo de esta técnica es que es súmamente fácil; lo malo es que tu imagen SVG perderá todas las capacidades de edición en tiempo real que aporta de manera nativa, ¿cómo cuales? bueno, a través de un SVG que pueda controlarse con CSS, es posible crear transiciones, aplicar animaciones al objeto, entre otras cosas.

<img src="../ruta/imagen.svg" width="100" height="100">

<!-- Puedes usar medidas en porcentaje -->

<img src="../ruta/a/tu/imagen.svg" width="80%">

La gran ventaja de un SVG es su capacidad de escalarlo al tamaño que necesites; esto puedes lograrlo utilizando porcentajes, ya sea en HTML o en CSS.

La ventaja de un SVG es su capacidad de escalarlo; puedes hacerlo con porcentajes, ya sea en HTML o en CSS.

2. Embebiendo el código del SVG

Esta es la forma más versátil en que puedes utilizar un SVG. La desventaja que presenta es que tu código HTML quedará saturado de líneas de código SVG para representar al gráfico y en ocasiones se convierte en una situación un poco desorganizada. Regularmente los desarrolladores eliminan los espacios en blanco y los saltos de línea para hacer menos sucia esta técnica.

Para obtener el código fuente del SVG basta con abrir tu archivo en un editor de texto plano (como bloc de notas, Dreamweaver, Sublime, entre otros). De ese código, probablemente encuentres algunas líneas más o menos que las que te muestro en el ejemplo más delante, pero las líneas de código que ves aquí son las esenciales para el funcionamiento de la imagen.

También puedes notar que probablemente tu SVG tiene nombre de ID (para manipularlo con CSS). Esto le da un gran poder al formato SVG, porque puedes modificar las propiedades gráficas de la imagen a través de CSS; lo más común es modificar la propiedad fill (que también puedes indicarla en el código SVG en forma de atributo) para cambiar el color de relleno de la forma. Incluso, con una transición CSS podrías hacer una animación para el gráfico.

A continuación te muestro un pequeño ejemplo de un gráfico con la cabeza de un oso y el código SVG que Adobe Illustrator generó para representarlo. Puedes notar que tiene una ID, en un objeto utilicé la propiedad fill (de hecho puedes ponerlo para cualquier elemento gráfico del SVG) para indicarle que tenga un color café. También debes notar que hay una serie de etiquetas path, circle, polygon, entre otras; todas ellas se utilizan para indicar el trazo del objeto en cuestión y, en su conjunto, la imagen completa.

A la izquierda puedes ver el gráfico original y a la derecha el código generado para la exportación en formato SVG

A la izquierda puedes ver el gráfico original y a la derecha el código generado para la exportación en formato SVG

Regularmente, resultaría demasiado complicado generar manualmente el código para representar a la imagen, por eso casi nadie lo hace. Ahora bien, para utilizarlo en HTML basta con copiar el código y pegarlo en el lugar donde lo mostrarás (como si fuera una imagen cualquiera). A partir de este punto, puedes agregar el atributo width y height al igual que en la etiqueta img; pero debido a que los elementos se encuentran directamente disponibles en el código, puedes acceder a ellos a través de CSS, con lo que podrías generar una transición.

Primeramente, tenemos el código para hacer que los objetos de tipo PATH internos en el #OSO se encuentren en color gris y cuando pases por encima se hagan cafés.

/* LOS OBJETOS PATH INTERNOS EN ESTADO NORMAL */
#oso path {
	/* CON FILL INDICAMOS EL COLOR QUE INICIAL */
	fill: #eaeaea;
}

#oso:hover path {
	/* CUANDO PASAMOS POR ENCIMA DEL OSO QUEREMOS QUE LAS FORMAS INTERNAS CAMBIEN DE COLOR */
	fill: #722611;
}

Y ahora queremos que tengan una simple transición de color, para eso agregaremos a los PATH la propiedad TRANSITION, la cual hará que veamos el cambio de color con una animación.

/* LOS OBJETOS PATH INTERNOS EN ESTADO NORMAL */
#oso path {
	/* CON FILL INDICAMOS EL COLOR QUE INICIAL */
	fill: #eaeaea;
	/* AGREGANDO LA TRANSICION */
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
			transition: all 0.5s ease;
}

#oso:hover path {
	/* CUANDO PASAMOS POR ENCIMA DEL OSO QUEREMOS QUE LAS FORMAS INTERNAS CAMBIEN DE COLOR */
	fill: #722611;
}

Este concepto podrías llevarlo a muchos límites distintos, pero para el ejemplo he querido mantenerlo simple. Quizás en el futuro hagamos algún video tutorial para profundizar más en estrategias de manipulación de SVG.

3. Insertarlo a través de CSS

Si eres purista de CSS seguramente no te gustará tener tanto código SVG metido en tu precioso HTML.

Una tercera forma de incluir tu imagen SVG será a través de CSS. Para ello tendrás que agregarlo como fondo con background-image,

Esto funciona casi igual que cuando incluyes cualquier imagen de mapa de bits, con una pequeña diferencia: siempre será necesario que indiques el tamaño que tendrá el gráfico, porque automáticamente el navegador tratará de rellenar el espacio completo con el SVG (y ¿por qué no, si puede ponerlo en el tamaño que quiera?).

Con las propiedades background-size y background-position podrás compensar y arreglar esa situación.

En el ejemplo a continuación, te muestro primeramente el código HTML (en el que sólo tenemos un link con una ID), luego el código CSS y finalmente una simulación del resultado obtenido.

<a href="#" id="icono">Tengo un SVG</a>

#icono {
	background-image: url(../imagenes/icono.svg);
	background-size: 20px 20px;
	background-position: left center;
	padding-left: 30px; /* GENERAMOS EL ESPACIO PARA LA IMAGEN */
	color: #333;
	text-decoration: none;
}

Nuestro link con el fondo SVG, dimensionado a 20x20px y con un padding-left de 30px

Nuestro link con el fondo SVG, dimensionado a 20x20px y con un padding-left de 30px

Utiliza SVG parte 2

Con cualquiera de las estrategias anteriores podrás gozar de las posibilidades de escalabilidad que ofrece el formato SVG. Ya sea que incluyas el archivo en HTML, lo embebas o lo establezcas como fondo con CSS, tu gráfico se verá perfecto en todo tipo de pantallas y niveles de zoom.

¿Hay algo específico que quieras aprender a hacer con SVG?

Sigue la revista de Catarsis en Flipboard
Suscríbete a Catarsis en Play Kiosco

Author Josué E. Pizano

Amante del diseño de Experiencia de Usuario (UX), evangelista de CSS, adicto a la tecnología y apasionado del desarrollo Web, el cine, la comida y la música.

Más entradas de Josué E. Pizano

Deja una respuesta