Cómo deberían pensar los diseñadores sobre SVG

Las impresionantes cosas que creará con SVG, cómo se diferencia de otros gráficos y por qué exportar requiere nuevas consideraciones.

Mientras preparaba mi nuevo curso sobre flujos de trabajo SVG en Sketch, hablé con un grupo de diseñadores, tanto junior como senior, sobre su uso del formato. Y he notado un malentendido común sobre SVG:

A menudo esperamos que SVG se comporte como un gráfico de mapa de bits, como un PNG con resolución infinita. Pero realmente no lo es.

Por un lado, ciertas cosas son más difíciles con SVG. Exportar, o más específicamente, el proceso de pasar de Sketch * a un gráfico final, puede llevar de unos pocos segundos a 10 minutos. Depende de su diseño y de cómo planea usar el gráfico. Para crear un SVG que satisfaga perfectamente sus necesidades, es posible que tenga que adaptar sus capas de Sketch de ciertas maneras, o ajustar el marcado exportado. Esto puede parecer complicado y tedioso, pero no es difícil y abre un mundo de posibilidades sobre cómo usar un SVG.

Porque a pesar de sus diferencias, SVG tiene una gran cantidad de cualidades increíbles. Revisaremos esos primero, porque son divertidos, luego abordaremos cómo comenzar a pensar prácticamente en SVG.

* Nota: Aunque Sketch es mi herramienta de diseño preferida, los conceptos de este artículo se aplican igualmente a Adobe Illustrator y a la mayoría de las otras herramientas.

Una breve definición técnica:

SVG significa Gráficos Vectoriales Escalables. Es un formato de gráficos, como JPEG o PDF, y toda la idea detrás de ellos es que no están limitados a una determinada resolución; porque en lugar de estar hechos de píxeles, los SVG están hechos de formas vectoriales. Aunque se pueden usar en una variedad de lugares, los SVG están más en casa en la web. Los siguientes ejemplos muestran su potencial.

¿Por qué es SVG tan sorprendente?

Muchos otros antes que yo han exaltado los beneficios de SVG en detalle. (Si es desarrollador web, consulte la charla de Chris Coyier SVG Is for Everybody para obtener una descripción más técnica). En este artículo, destacaré cinco beneficios clave que a la mayoría de los diseñadores les interesarán.

Cualquier tamaño. Sin pixelación.

Los SVG son como sus Artboards en Sketch: aunque tienen dimensiones específicas, también contienen detalles infinitos, porque las capas / elementos en su interior son formas vectoriales. Por lo tanto, puede mostrar un gráfico SVG en cualquier tamaño, y nunca aparecerá pixelado.

Tamaños de archivo pequeño

Mientras no use SVG para fotografías (para eso está JPEG), la mayoría de las veces los SVG ocupan mucho menos espacio que PNG o JPEG.

Esto se debe a que, para una imagen de mapa de bits (como PNG o JPEG), el factor principal que determina el tamaño del archivo es la resolución. En general, una imagen de 3000 × 3000 píxeles siempre será más grande que una de 300 × 300.

Pero para un SVG, el factor principal es el detalle: cuántas capas hay en el gráfico y cuántos gradientes, máscaras o efectos personalizados deben describirse. Las dimensiones del gráfico casi no tienen impacto en el tamaño del archivo. Para la mayoría de los iconos y otros elementos de diseño, SVG es un claro ganador en lo que respecta al tamaño del archivo (y los tiempos de carga).

Como GIF, esta animación supera los 400 KB. ¡Pero como SVG es solo 3KB!

Gráficos animados y dinámicos

Esta es una de mis cosas favoritas sobre SVG: si conoce un poco de desarrollo web, puede animar gráficos SVG como si fueran cualquier otra parte de un sitio web. Y todo ese código mágico puede estar contenido dentro del archivo SVG. Entonces podría tener un pequeño ícono de 6 kilobytes que cobra vida como si fuera un video.

Incluso puede hacer que sus gráficos sean dinámicos, como un reloj que puede indicar la hora o un ícono que coincida con el color de cualquier texto al lado. Los SVG pueden responder y cambiar de varias maneras según el tamaño de la pantalla o la densidad de píxeles, o toneladas de otros factores. Las posibilidades son enormes, y realmente redefinen cómo pensamos acerca de lo que puede ser un solo gráfico.

Hojas de sprites y conjuntos de iconos

Me encantan los iconos, y en el último año o dos, han surgido varias técnicas para combinar varios iconos en el mismo SVG. Eso significa que puede poner un conjunto de iconos completo dentro de un gráfico. Un pequeño archivo! Este tipo de gráfico se denomina hoja de sprites y son increíblemente útiles en la web.

Muchos otros usos

Los gráficos SVG se pueden usar en una variedad de otras situaciones. Tal vez esté buscando crear ese ícono de pestaña anclada para su sitio web o acelerar el proceso de generación de activos de íconos para su aplicación de Android. Ambos admiten o requieren SVG, aunque sus estrictas especificaciones requieren que los diseñadores utilicen flujos de trabajo específicos para crearlos (más información sobre los flujos de trabajo a continuación).

Espera, ¿cómo es posible todo eso? ¿Qué es realmente SVG?

Para comprender cómo SVG es capaz de tanto, necesitamos desglosar cómo es inherentemente diferente de las imágenes de mapa de bits.

¿En qué se diferencian los SVG de los mapas de bits?

Los gráficos de mapa de bits, también conocidos como gráficos de trama, están basados ​​en píxeles. Esto incluye formatos como JPEG, PNG y GIF. Debajo del capó, son esencialmente una cuadrícula de cajas de colores.

Por ejemplo, esta imagen de mapa de bits de 3px × 3px tiene nueve píxeles: nueve cuadrados de colores. Esos cuadrados no pueden cambiar de ninguna manera. No pueden revelar más detalles, no pueden moverse y no pueden convertirse en otros colores: son permanentes y siempre absorben cierta cantidad de información. Amplíe la imagen más allá del 100% y verá pixelación.

Los gráficos vectoriales como los SVG no están hechos de píxeles de colores; son descripciones sobre tu gráfico. Se ven algo así debajo del capó:

Debido a que un SVG es solo una descripción del gráfico, se puede mostrar en cualquier tamaño; un círculo sigue siendo un "círculo" si se muestra a 3px o 3000px. Y las descripciones pueden cambiar. Cualquiera que haya pasado 15 minutos aprendiendo desarrollo web puede editar la descripción de un SVG, para ajustar, por ejemplo, el color de una forma o el grosor de una línea. De muchas maneras…

Los SVG son seres vivos. Los mapas de bits son fotos de cosas.

También puede resultarle útil pensar en lo que sucede cuando exporta desde Sketch. Las imágenes de mapa de bits aplanan su diseño en una sola capa. El PNG o JPEG resultante no conoce los nombres de sus capas, o realmente nada sobre lo que representan.

Un SVG, por otro lado, no está aplanado. Todavía contiene todas sus capas y toneladas de información sobre ellas. Cuando exporta, Sketch intenta traducir su propia descripción de sus capas al lenguaje SVG. Es por eso que, ocasionalmente, la versión SVG se ve diferente; alguna parte de lo que hiciste en Sketch no podría describirse fácilmente en el lenguaje SVG.

Debido a que un SVG todavía contiene toda / la mayor parte de la información sobre sus capas, puede manipular o adaptar esas capas a todos los usos anteriores: animaciones, objetos interactivos / dinámicos, conjuntos de iconos, etc.

Pero, ¿cómo llegamos allí, a partir de nuestro diseño Sketch?

¿Cómo es que Sketch exporta SVG?

SVG es uno de los formatos que puede elegir al exportar. Pero la mayoría de nosotros, y me incluyo en esto, cometemos el error de pensar que exportar un SVG será tan fácil como cualquier otro tipo de gráfico. "Simplemente exportaremos un 1x PNG, un 2x PNG, y bueno, ¿por qué no exportar también en vector? SVG. Voila! ¡Ya hemos terminado! "

Desafortunadamente, el SVG resultante no siempre se ve de la manera que queremos, o el tamaño del archivo es impredecible, o tal vez el archivo no es compatible con ciertas especificaciones que requiere nuestro desarrollador o una aplicación.

Esto no es culpa de Sketch. Sketch ha estado mejorando constantemente su exportación de SVG, y ahora es bastante bueno.

La verdadera pregunta es: con todas estas formas diferentes de usar un SVG, ¿cómo sabe Sketch exactamente qué exportar?

No lo hace No puede Todo lo que puede hacer cualquier software de gráficos es tratar de traducir sus capas de la manera más similar posible en capas SVG. Cómo hiciste algo en Sketch es cómo Sketch intentará exportarlo.

Hay ciertas formas en que se puede codificar un SVG (en otras palabras, formas en que se pueden describir las capas) que lo hacen especialmente legible para los desarrolladores, u optimizado para archivos pequeños, o fácil de animar, o encajar en un conjunto de iconos. Y esas diferencias van más allá de cómo se exporta; a menudo están determinados por cómo se construyen sus capas fundamentalmente en Sketch.

Este mismo ícono de signo de exclamación podría estar hecho de 2 formas estándar separadas (izquierda), una sola ruta combinada (centro) o una línea vertical con bordes con un rectángulo redondeado (derecha). ¡También hay otras posibilidades!

Por "construido" me refiero a cómo creó, combinó y diseñó sus capas para lograr un cierto resultado. Este ejemplo de signo de exclamación, arriba, podría hacerse de varias maneras. No siempre hay una forma correcta: todo depende de cómo pretendes utilizar el gráfico. Y de vez en cuando depende de qué características admite SVG. Aquí hay otro ejemplo de mi curso:

En este ejemplo, podría haber sido más fácil en Sketch crear la cabeza de alfiler con 3 rellenos. Pero si bien los gradientes radiales son compatibles con SVG, los modos de mezcla y los rellenos múltiples por forma requieren soluciones alternativas y pueden producir resultados inconsistentes.

A menudo, la forma más eficiente o conveniente de simular una idea en Sketch no es la forma más eficiente o estable de construir las capas para SVG.
Entonces, lo primero que hago cuando quiero exportar algo de Sketch a SVG es duplicar la mesa de trabajo. El Artboard duplicado es donde hago cambios en las capas: desagruparlas, eliminar máscaras, aplanar transformaciones, delinear texto, ajustar bordes, cambiar el nombre de todo, etc., cualquier cosa que garantice que el SVG resultante se vea correcto y satisfaga las necesidades de mi proyecto.

Es por eso que, al comienzo del artículo, dije que este proceso de "exportación" puede llevar de unos pocos segundos a 10 minutos. Depende de sus capas y diseño específicos, y de cómo piensa utilizar el SVG resultante.

Probablemente te estés preguntando:

¿Cuáles son todos los cambios que tendré que hacer en mis capas de Sketch para producir el SVG definitivo?

Si hubiera una respuesta fácil, te lo diría. La verdad es que hay una docena de mejores prácticas en las que confío al adaptar un diseño de Sketch para SVG. (Aludí a algunos de ellos arriba). Pero no todos son útiles en todas las situaciones. He publicado una lista de verificación de aplicaciones web gratuitas de estas mejores prácticas, y para explicar el razonamiento detrás de ellas, ¡tuve que hacer un curso completo! Es simplemente más de lo que podría caber en un par de artículos.

El curso, que ahora está disponible después de 8 meses de desarrollo, está pensado para que se sienta cómodo con SVG y con todos los flujos de trabajo de Sketch que utilizará para convertirse en un usuario avanzado.

que puedes hacer diferente?

Te dejaré con algunos consejos prácticos y para llevar.

  • Recuerde que los SVG son como seres vivos, destinados a diferentes lugares y usos. Como resultado, a menudo se pueden construir de múltiples maneras.
  • Si no obtiene los resultados que desea, intente hacer el gráfico de una manera diferente. Por ejemplo, si los bordes no se ven bien, intente delinearlos antes de exportar.
  • No incluya imágenes de mapa de bits en su SVG. Vencen todos sus beneficios.
  • Trabaje con un desarrollador para comprender el formato desde las perspectivas de diseño e ingeniería, para que sepa cómo trabajarlo según sus necesidades.
  • Para comenzar a mejorar el tamaño de archivo de sus SVG, instale el complemento SVGO de Sketch (la O significa optimización). El complemento, que se ejecuta en segundo plano después de exportar cualquier SVG, intenta reducir el archivo de varias maneras. Hay mucho más que puede hacer para reducir el tamaño de un SVG, pero si no le importa pasar tiempo, este complemento es mejor que nada.

Independientemente de si el nuevo curso es para usted, espero que este artículo haya aclarado qué es SVG, de qué es capaz, cómo funciona y cómo pensarlo en relación con otros formatos gráficos. ¡Feliz diseño!

Regístrese en mi boletín para ser el primero en saber cuándo publico nuevos artículos y recursos de diseño.

Si disfrutaste este artículo, te encantará Sketch Master, mis cursos de capacitación en línea para profesionales que aprenden Sketch. Aprenderá toneladas de trucos y flujos de trabajo prácticos, diseñando UI / UX del mundo real y proyectos de íconos de aplicaciones.