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 asombrosos 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 tramas 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 adaptable es una parte importante del manejo de diferentes tamaños de pantalla, y los SVG son ideales para manejar 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 para los mapas de bits; este último es más adecuado para imágenes con tonos continuos.
Uno de los aspectos más útiles de los archivos SVG es que son independientes de la resolución, es decir, que no es necesario pensar en la cantidad de píxeles que tiene en su dispositivo, ya que el resultado siempre se ajustará y optimizará el navegador para que se vea genial.
Herramientas de creación populares, como la aplicación de dibujo en Google Drive, Inkscape, Illustrator, Corel Draw y muchas otras, generan SVG, por lo que existen muchas formas de generar contenido. Profundizaremos en algunas formas de usar los elementos SVG, además de algunas sugerencias de optimización para que puedas comenzar.
Aspectos básicos de escalamiento
Comencemos con una situación simple: deseas 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 cualquier cosa como esa pantalla en segundo plano en todo momento, pero, por supuesto, es muy difícil de hacer muy 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. Como habrás adivinado, se origina como un archivo SVG.
Haz clic en el logotipo y échale un vistazo en cualquier navegador actualizado. 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 mantiene nítida con cualquier ampliación. Si tratáramos de hacerlo con una imagen de mapa de bits, tendríamos que mostrar diferentes tamaños para cada pantalla que podamos encontrar o nos veríamos obligados a soportar imágenes a escala extremadamente pixeladas.
Entonces, ¿cuál es el gran problema? Por si no lo notaron, este es el único formato que escala independientemente del dispositivo que lo usemos para verlo. Por lo tanto, solo necesitamos mostrar un recurso a nuestros usuarios, sin necesidad de saber cuál es el tamaño de su pantalla o ventana. ¡Genial!
Pero espera, todavía hay más: ¡el logotipo de HTML5 tiene solo 1,427 bytes! ¡Uy! Es tan pequeño que casi no se avería en ningún plan de datos móviles cuando lo cargues, lo que hace que se cargue más rápido y sea más barato y rápido para tus usuarios.
Otro aspecto positivo de los archivos SVG es que se pueden comprimir con GZIP para reducirlos aún más. Cuando se comprime el archivo SVG de esa manera, la extensión debe cambiarse a ".svgz". En el caso del logotipo 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 de 60 veces si usamos datos vectoriales comprimidos. Además, ten en cuenta que estas comparaciones se realizan entre JPEG y SVG, y no PNG. Sin embargo, el JPEG es un formato con pérdidas que da como resultado una calidad menor que el SVG o PNG. Si usáramos PNG, la ventaja sería de más de 80 veces, lo cual es sorprendente.
Pero, por supuesto, PNG y JPEG no se crean de la misma manera. Varios consejos de optimización te dicen que uses JPEG en lugar de PNG, pero esa no siempre es una buena idea. Mira las siguientes imágenes. La imagen de la izquierda es una imagen PNG de la parte superior derecha del logotipo HTML5 ampliada 6x. La imagen de la derecha es la misma, pero está codificada con JPEG.
Es fácil ver que ahorrar el tamaño de los archivos en JPEG tiene un costo, con artefactos de color en los bordes nítidos, lo que probablemente hará que la retina piense que necesita lentes:-) Ser justo, JPEG está optimizado para fotos, y por eso no es tan bueno para el arte vectorial. En cualquier caso, la calidad de la versión SVG es la misma que la de PNG, por lo que prevalece en todas las cuentas, tanto en el tamaño de archivo como en la claridad.
Cómo crear fondos vectoriales
Veamos cómo se puede usar un archivo vectorial como fondo de una página. Una manera 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, sin importar el tamaño de la pantalla, el tamaño de la imagen es perfecto, con bordes nítidos y limpios.
Por supuesto, nos gustaría que se pusiera algo de contenido en segundo plano.
Sin embargo, como puedes ver, el resultado no es el ideal, ya que no podemos leer el texto. Entonces, ¿qué hacemos?
Ajustamos el fondo para que se vea más agradable
Obviamente, tenemos que 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 bien usando opacidad en el propio archivo SVG. Para que esto funcione, solo tienes que agregar este código a tu contenido de CSS:
#bg {
opacity: 0.2;
}
Obtendrás un resultado como el siguiente:
Si bien esta solución es sencilla, es probable que sea un punto débil 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 de dibujar en comparación con los objetos opacos.
Una mejor solución
Modificar el color en el contenido SVG original es mucho mejor que configurar la opacidad con CSS. Este es nuestro logotipo HTML5 modificado para que se vea fundido cambiando los colores usados y, en el proceso, evitando la propiedad de opacidad. Por lo tanto, la imagen de fondo que aparece a continuación parece idéntica al resultado del cambio de opacidad, pero se pintará mucho más rápido y nos ahorrará tiempo de CPU y, en el proceso, una valiosa duración de batería.
Ahora que ya conocemos algunos aspectos básicos, pasemos a otras funciones.
Cómo usar gradientes de manera eficiente
Digamos que queremos crear un botón. Podríamos empezar por crear un rectángulo con buenas esquinas redondeadas. Luego, podríamos agregar un gradiente lineal agradable para darle una textura agradable al botón. El código para hacerlo podría ser similar al siguiente:
<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 terminaría con algo como esto:
Observa cómo el gradiente que agregamos va de izquierda a derecha. Esta es la dirección del gradiente predeterminada en SVG. Pero podemos hacerlo mejor por varias razones: la estética y el rendimiento. Intentemos cambiar la dirección del gradiente para que se vea un poco más agradable. Configurar los atributos "x1", "y1", "x2" e "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. Este pequeño cambio de código:
<linearGradient id="blueshiny" y2="1">
nos da un aspecto distinto para el botón, que termina luciendo como la imagen de abajo.
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 eso terminará pareciendo a la imagen de abajo.
Entonces, ¿de qué se trata la discusión sobre los diferentes ángulos del gradiente que escuché preguntar?
Resulta que el último ejemplo, el que tiene el gradiente que va de arriba abajo, es el más rápido de dibujar en la mayoría de los dispositivos. Es un secreto muy poco conocido entre los "geeks" gráficos que escriben código de los navegadores que los gradientes verticales (de arriba a abajo) se pintan casi tan rápido como un color sólido. (La razón es que la pintura de un objeto se realiza en líneas horizontales en la página, y la parte central del código de dibujo entiende que el color no cambia en cada línea y, por lo tanto, lo optimizan).
Por lo tanto, cuando eliges usar gradientes en el diseño de la página, los gradientes verticales serán más rápidos y usará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 aspecto de SVG.
Si nos sentimos muy audaz con este nuevo conocimiento del gradiente, entonces tal vez podamos agregar un gradiente genial detrás de nuestro logotipo de HTML5 agregando 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 atenuado al fondo de nuestro logotipo HTML5 para darle un sutil tinte multicolor que se ejecuta con rapidez, tan rápido como un fondo de color sólido.
Si cargas el contenido en un navegador de escritorio y cambias el tamaño a relaciones de aspecto extremas, verás barras blancas en los lados superior/inferior o izquierdo/derecho. De todos modos, después de los cambios de código realizados sobre el fondo resultante se verá de la siguiente manera:
Anima con facilidad
Es posible que te preguntes cuál es el punto de usar un gradiente de SVG como fondo para tu página. De hecho, podría tener sentido hacerlo con gradientes de CSS, pero una ventaja de SVG es que el gradiente reside en el DOM. Esto significa que puedes modificarlo con una secuencia de comandos, pero, lo que es más importante, 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 anteriores.
El código cambia los colores de nuestro gradiente lineal a través de todos los diferentes elementos de color que definimos en un ciclo continuo que tarda 20 segundos en ejecutarse. El efecto es que el gradiente parece que se mueve hacia arriba en la página con un movimiento continuo que nunca se detiene.
¡La belleza de esto es que no se necesita un guion! Es por eso que se ejecuta como una imagen a la que se hace referencia en esta página, pero también reduce la carga de trabajo en una CPU móvil ya que elimina la necesidad de una secuencia de comandos.
Además, el propio navegador puede aprovechar sus conocimientos de la pintura para garantizar que se utilice una sobrecarga mínima de la CPU para realizar la animación sofisticada.
Hay una salvedad: algunos navegadores no admiten este estilo de animación en absoluto, pero, en ese caso, obtendrás un fondo de color bonito, pero no cambiará. Esto se puede solucionar usando script (y requestAnimationFrame), pero eso está un poco más allá de este artículo.
Un aspecto más a tener en cuenta es que este archivo SVG sin comprimir solo pesa 2,922 bytes. Es increíblemente pequeño para proporcionar un efecto gráfico tan enriquecido y mantener contentos a los usuarios y a esos planes de datos en el proceso.
¿A dónde quieres ir desde aquí?
Hay muchos casos en los que SVG no es ideal, por lo que las fotos y los videos se representan mejor en otros formatos. El texto es otro en el que el HTML y 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.
Analizamos algunos usos básicos básicos de los gráficos SVG para mostrar lo fácil que es generar contenido pequeño con gráficos vívidos en pantalla completa con una cantidad mínima de descarga. Con pequeñas mejoras en el contenido se pueden crear resultados gráficos asombrosos con facilidad y con mucho lenguaje de marcado. En el siguiente artículo, exploraremos algunos detalles sobre cómo se puede usar la animación integrada en SVG para lograr efectos más simples y potentes, y compararemos el uso de lienzo con SVG para elegir la herramienta adecuada que te permita crear tu sitio de gráficos para dispositivos móviles.
Otros recursos útiles
- Inkscape, una aplicación de dibujo de código abierto que usa SVG como formato de archivo.
- Open Clip Art: Una enorme biblioteca de imágenes prediseñadas de código abierto que contiene miles de imágenes SVG.
- Página de SVG de W3C que contiene vínculos a especificaciones, recursos, etcétera
- Raphaël, una biblioteca de JavaScript que proporciona una API conveniente para dibujar y animar contenido SVG con un excelente resguardo para navegadores anteriores.
- Recursos SVG de Slippery Rock University (incluye un vínculo a un excelente Primer SVG)