Crear contenido deslumbrante para dispositivos móviles implica equilibrar la cantidad de datos descargados con el máximo impacto visual. Los gráficos vectoriales son una excelente manera de ofrecer resultados visuales impresionantes con un ancho de banda mínimo.
Muchas personas piensan en el lienzo como la única forma de dibujar una combinación de vectores y mapas de bits en la Web, pero existen alternativas que tienen algunas ventajas. Una excelente manera de lograr el dibujo vectorial es mediante el uso de gráficos vectoriales escalables (SVG), que es una parte clave de HTML5.
Todos sabemos que el diseño responsivo es una parte importante para controlar diferentes tamaños de pantalla, y SVG es ideal para controlar pantallas de diferentes tamaños con facilidad.
SVG es una excelente manera de presentar dibujos de líneas basados en vectores y es un gran complemento de los mapas de bits, que son más adecuados para las imágenes de tono continuo.
Una de las características más útiles de los SVG es que son independientes de la resolución, lo que significa que no necesitas pensar en cuántos píxeles tienes en tu dispositivo, ya que el navegador siempre escalará y optimizará el resultado para que se vea genial.
Las herramientas de creación populares, como la aplicación de dibujo de Google Drive, Inkscape, Illustrator, Corel Draw y muchas otras, generan SVG, por lo que hay muchas formas de generar contenido. Analizaremos algunas formas de usar recursos SVG, además de algunas sugerencias de optimización para comenzar.
Conceptos básicos del escalamiento
Comencemos con una situación simple: quieres que un gráfico de página completa sea el fondo de tu página web. Sería muy útil tener el logotipo de tu empresa o algo similar en pantalla completa en segundo plano en todo momento, pero, por supuesto, es muy difícil hacerlo bien con todos los diferentes tamaños de pantalla que existen. A modo de ejemplo, comenzaremos con el humilde logotipo de HTML5.
A continuación, se muestra el logotipo de HTML5 y, como lo adivinaste, se origina como un archivo SVG.
Haz clic en el logotipo y obsérvalo en cualquier navegador moderno. Verás que se ajusta perfectamente a cualquier tamaño de ventana. Intenta abrirla en tu navegador favorito, cambia el tamaño de la ventana y observa que la imagen se vea nítida en cualquier ampliación. Si intentáramos hacerlo con una imagen de mapa de bits, tendríamos que entregar muchos tamaños diferentes para cada pantalla que encontremos o tendríamos que soportar imágenes escaladas con píxeles horribles.
¿Cuál es el problema? Si no lo habías notado, este es el único formato que se ajusta independientemente del dispositivo que usemos para verlo. Por lo tanto, solo debemos publicar un recurso para nuestros usuarios, sin necesidad de saber cuál es el tamaño de su pantalla o ventana. ¡Fantástico!
Pero espera, hay más: el logotipo de HTML5 solo tiene 1,427 bytes. ¡Uf! Es tan pequeño que apenas afectará a cualquier plan de datos móviles cuando se cargue, lo que hace que sea rápido y económico para tus usuarios.
Otra ventaja de los archivos SVG es que se pueden comprimir con GZIP para reducirlos aún más. Cuando comprimas el SVG de esa manera, la extensión del archivo se debe cambiar a “.svgz”. En el caso del logotipo de HTML5, se reduce a solo 663 bytes cuando se comprime, y la mayoría de los navegadores modernos lo manejan con facilidad.
Con nuestro archivo de ejemplo en algunos de los dispositivos más recientes, vemos una ventaja 60 veces mayor cuando se usan datos vectoriales comprimidos. Además, ten en cuenta que estas comparaciones se realizan entre el JPEG y el SVG, en lugar del PNG. Sin embargo, el JPEG es un formato con pérdida de información, lo que genera una calidad inferior a la de SVG o PNG. Si usáramos PNG, la ventaja sería de más de 80 veces, lo cual es asombroso.
Pero, por supuesto, PNG y JPEG no son iguales. Algunas sugerencias de optimización te dicen que uses JPEG en lugar de PNG, pero no siempre es una buena idea. Observa las siguientes imágenes. La imagen de la izquierda es una imagen PNG de la parte superior derecha del logotipo de HTML5 ampliada 6 veces. La imagen de la derecha es lo mismo, pero codificada con JPEG.
Es fácil ver que el ahorro de tamaño de archivo en JPEG tiene un costo, con artefactos de color en los bordes nítidos, lo que probablemente haga que tu retina piense que necesita lentes:-) Para ser justos, JPEG está optimizado para fotos y por eso no es tan bueno para el arte vectorial. En cualquier caso, la versión SVG es igual que la PNG en calidad, por lo que gana en todos los aspectos, tanto en el tamaño del archivo como en la claridad.
Cómo crear fondos vectoriales
Veamos cómo puedes usar un archivo vectorial como fondo de una página. Una forma sencilla es declarar tu archivo de fondo con el posicionamiento fijo de CSS:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Notarás que, independientemente del tamaño de la pantalla, la imagen tiene un tamaño adecuado con bordes nítidos y limpios.
Por supuesto, nos gustaría colocar algo de contenido sobre el fondo.
Sin embargo, como puedes ver, el resultado no es ideal, ya que no podemos leer el texto. ¿Qué hacemos?
Cómo ajustar el fondo para que se vea mejor
Lo más obvio que debemos hacer es hacer que todo el color de la imagen de fondo sea más claro. Esto se logra fácilmente con la propiedad de opacidad de CSS o con la opacidad en el archivo SVG. Para que esto funcione, simplemente agrega este código a tu contenido de CSS:
#bg {
opacity: 0.2;
}
Esto te dará un resultado como el siguiente:
Si bien esta solución es fácil, es probable que sea un problema de rendimiento en un dispositivo móvil. En la mayoría de los navegadores para dispositivos móviles existentes, el uso de la propiedad de opacidad puede ser mucho más lento en comparación con los objetos opacos.
Una mejor solución
Modificar el color en el contenido SVG original es mucho mejor que establecer la opacidad con CSS. Aquí se muestra nuestro logotipo HTML5 modificado para que se vea atenuado cambiando los colores utilizados y, en el proceso, evitando por completo la propiedad de opacidad. Por lo tanto, la imagen de fondo que se muestra a continuación se ve idéntica al resultado de cambiar la opacidad, pero en realidad se pintará mucho más rápido y nos ahorrará tiempo de CPU y batería en el proceso.
Ahora que tenemos un buen conocimiento de algunos aspectos básicos, pasemos a otras funciones.
Usa los gradientes de manera eficiente
Supongamos que queremos crear un botón. Podríamos empezar por crear un rectángulo con agradables esquinas redondeadas. Luego, podríamos agregar un gradiente lineal y atractivo para darle al botón una textura agradable. El código para hacerlo podría verse de la siguiente manera:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
El botón resultante se vería de la siguiente manera:
Observa cómo el gradiente que agregamos va de izquierda a derecha. Esta es la dirección de gradiente predeterminada en SVG. Sin embargo, podemos hacerlo mejor por dos motivos: estética y rendimiento. Intentemos cambiar la dirección del gradiente para que se vea un poco mejor. La configuración de los atributos "x1", "y1", "x2" y "y2" en el gradiente lineal controla la dirección del color de relleno.
Configurar solo el atributo "y2" nos permite cambiar el gradiente para que sea diagonal. Por lo tanto, este pequeño cambio de código hace lo siguiente:
<linearGradient id="blueshiny" y2="1">
nos da un aspecto diferente para nuestro botón, que termina pareciendo la siguiente imagen.
También podemos cambiar fácilmente el gradiente para que vaya de arriba abajo con este pequeño cambio de código:
<linearGradient id="blueshiny" x2="0" y2="1">
y se verá como la imagen de abajo.
¿Qué significa todo este debate sobre los diferentes ángulos del gradiente?
Resulta que el último ejemplo, el que tiene el gradiente de arriba abajo, es el más rápido de dibujar en la mayoría de los dispositivos. Entre los geeks gráficos que escriben código de navegador, es un secreto muy poco conocido que los gradientes verticales (de arriba abajo) se pintan casi tan rápido como un color sólido. (el motivo es que pintar un objeto se hace en líneas horizontales en la página, y la parte principal del código de dibujo comprende que el color no cambia en cada línea, por lo que lo optimiza).
Por lo tanto, si eliges usar gradientes en el diseño de tu página, los verticales serán más rápidos y consumirán menos batería como efecto secundario. Esta aceleración también se aplica a los gradientes de CSS, por lo que no es solo un elemento SVG.
Si nos sentimos muy aventureros con este nuevo conocimiento sobre los gradientes, podemos agregar un gradiente genial detrás de nuestro logotipo de HTML5 con el siguiente código:
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
El código anterior agrega un gradiente lineal vertical descolorido al fondo de nuestro logotipo de HTML5 para darle un tono sutil de varios colores que se ejecuta rápido, tan rápido como un fondo de color sólido.
Si cargas el contenido en un navegador para computadoras y cambias el tamaño a relaciones de aspecto extremas, verás que aparecen barras blancas en la parte superior o inferior, o en los lados izquierdo o derecho. De todos modos, después de que los cambios de código realizados sobre el fondo resultante se vean de la siguiente manera:
Anima con facilidad
A estas alturas, es posible que te preguntes cuál es el sentido de usar un gradiente SVG como fondo de tu página. De hecho, podría tener sentido hacerlo con los gradientes de CSS, pero una ventaja de SVG es que el gradiente en sí reside en el DOM. Esto significa que puedes modificarlo con un script, pero lo más importante es que puedes aprovechar la capacidad de animación integrada de SVG para agregar cambios sutiles a tu contenido.
A modo de ejemplo, modificaremos nuestro logotipo HTML5 colorido cambiando la definición del gradiente lineal al siguiente código:
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
Observa la siguiente imagen para ver el resultado de estos cambios.
El código cambia los colores de nuestro gradiente lineal a través de todos los diferentes puntos de color que definimos en un ciclo continuo que tarda 20 segundos en ejecutarse. El efecto de esto es que el gradiente parece moverse hacia arriba de la página en un movimiento continuo que nunca se detiene.
Lo mejor de esto es que no se requiere una secuencia de comandos. Por eso, se ejecuta como una imagen de referencia desde esta página, pero también reduce la carga de trabajo en una CPU para dispositivos móviles, ya que quita la necesidad de la secuencia de comandos.
Además, el navegador puede aprovechar su conocimiento de la pintura para garantizar que se use una sobrecarga mínima de la CPU para realizar la animación elegante.
Hay una salvedad: algunos navegadores no controlan este estilo de animación en absoluto, pero, en ese caso, seguirás obteniendo un fondo de color agradable, pero no cambiará. Se podría solucionar con una secuencia de comandos (y requestAnimationFrame), pero eso va más allá de este artículo.
Otro punto a tener en cuenta es que este archivo SVG sin comprimir tiene solo 2,922 bytes, lo que es increíblemente pequeño para proporcionar un efecto gráfico tan rico, lo que mantiene contentos a los usuarios y a los planes de datos en el proceso.
¿Qué sigue después?
Hay muchos casos en los que SVG no es ideal, por lo que las fotos y los videos están mejor representados en otros formatos. El texto es otro, en el que el HTML y el CSS nativos funcionan mucho mejor en general. Sin embargo, como herramienta del arsenal para el material gráfico dibujado con líneas, puede ser la opción ideal.
Mencionamos algunos usos básicos y fundamentales de los gráficos SVG, y mostramos lo fácil que es generar contenido pequeño que proporciona gráficos vívidos en pantalla completa con una cantidad mínima de descarga. Pequeñas mejoras en el contenido pueden crear resultados gráficos increíbles con facilidad y con cantidades mínimas de marcado. En el siguiente artículo, exploraremos algunos detalles más sobre cómo se puede usar la animación integrada en SVG para obtener efectos más simples y potentes, y compararemos el uso del lienzo con SVG para elegir la herramienta correcta para crear tu sitio de gráficos para dispositivos móviles.
Otros buenos recursos
- Inkscape, una aplicación de dibujo de código abierto que usa SVG como formato de archivo
- Open Clip Art es una gran biblioteca de imágenes prediseñadas de código abierto que contiene miles de imágenes SVG.
- Página de SVG del W3C que contiene vínculos a especificaciones, recursos, etcétera
- Raphaël es una biblioteca de JavaScript que proporciona una API conveniente para dibujar y animar contenido SVG con un excelente resguardo para navegadores más antiguos.
- Recursos de SVG de la Universidad de Slippery Rock: Incluye un vínculo a un excelente Primer de SVG.