Cómo exportar iconos .svg limpios con Sketch

Como diseñadores, nos esforzamos todos los días para resolver problemas. Personalmente, me gusta sentarme con los desarrolladores y probar nuevas soluciones. Al revisar los archivos de origen de nuestra aplicación para el consumidor en Practo, me di cuenta de que el 30% estaba compuesto por elementos dibujables (imágenes, iconos, fuentes). Esto equivale a aproximadamente 3,2 MB. Más de 200 sorteos. Cada uno dibujable en 6 variaciones. Por cada ppp. Además, la mayoría de ellos ni siquiera fueron utilizados. Tener pngs para dibujables podría ser la salida fácil, pero seguramente no la más óptima.

Android lanzó recientemente su recurso para compatibilidad SVG con versiones anteriores también. Por lo tanto, realizamos esta tarea cuesta arriba para determinar los beneficios del uso de SVG en lugar de PNG para los elementos dibujables.

¿Qué es el SVG?

Gráficos vectoriales escalables (SVG) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación.

Vector dibujable?

Los dibujos vectoriales lo ayudan a crear un dibujo basado en un gráfico vectorial XML. En términos simples, todos los SVG deben convertirse a vectores dibujables y empaquetarse en un archivo .apk.

¿Por qué deberíamos usar SVG?

  • Gráficos vectoriales independientes de la resolución. No es necesario hacer iconos para 6 DPI diferentes.
  • La forma más fácil de hacer animaciones e interacciones.
  • Ahorra mucho espacio. 80–95% de espacio ahorrado usando svg en lugar de png (para un icono del sistema 24x24 dp)
  • Más fácil de administrar. Hacer un repositorio es mucho más fácil.
  • Necesita archivo en un solo color. Puede agregar colores mientras viaja durante el desarrollo.
  • Provisión para trabajar para todos los dispositivos Android. Android lanzó recientemente la compatibilidad con versiones anteriores de los iconos SVG.
  • Tener todos los dibujos en formato vectorial es una gran bendición para la colaboración cruzada.

Problemas actuales con la exportación de Sketch SVG

Mientras hacía iconos para el repositorio central descubrí un gran error. Los SVG exportados no tienen ningún problema. Ábrelos en Chrome o previsualízalos en Mac, se parecen a lo que esperas que sean. El problema surge cuando los convierte en vectores dibujables.

Así es como se ve un SVG descargado del icono de Google:

Ahora abro el mismo SVG en Sketch y lo exporto nuevamente. Aquí está el nuevo código SVG:

Icono descargado del repositorio de iconos de Google abierto en Sketch
 ic_build_black_24px 
 Creado con Sketch. 
 
 
 




Imaginó el error?

Si ve de cerca, la altura y el ancho en el primer svg es 24. Incluso el cuadro de vista es "0 0 24 24". El segundo svg acaba de cambiar la altura y el ancho a 22. Viewbox es "0 0 22 22". ¿Cómo ocurrió eso?

Ok, entonces Sketch solo toma la zona con el ícono real como el área de viewbox. Y para compensar, tienen una forma de polígono que es "0 0 24 24". El problema ocurre cuando intenta convertir este svg en un vector dibujable.

La herramienta de Android Studio que convierte SVG en Vector Drawables lee la etiqueta y las entradas asociadas a ellos. Dado que el svg de Sketch tiene un cuadro de vista defectuoso, el dibujo del vector resulta ser más pequeño y, por lo tanto, incorrecto.

¿Y notó la basura que Sketch ha exportado? Formas y grupos innecesarios. La razón de este problema es que Sketch a veces se equivoca al identificar capas enmascaradas, agrupadas u ocultas al exportar un svg.

¿Cómo crear SVG correctos?

Realmente no es tan difícil si sigues estos pasos con precaución. Puede ser un poco tedioso, pero los resultados finales valen la pena.

1. Crear una mesa de trabajo

Haga la mesa de trabajo del mismo tamaño del icono / ilustración que desea exportar.

2. Crea tu icono

Sketch es una herramienta muy poderosa para hacer íconos. Limpio, rápido y fácil. Pero hay algunas reglas a seguir si desea que se exporten limpiamente.

Regla 1: Intenta hacer formas con rellenos. Los rellenos se exportan fácilmente a vectores dibujables.

Regla 2: si su forma tiene un borde, use un borde central. Los SVG exportados con bordes internos o externos no se convierten en vectores dibujables.

Advertencias que se muestran al intentar exportar a un dibujable:

ADVERTENCIA @ línea 14 ¡No escalamos el ancho del trazo!
ADVERTENCIA @ línea 15 ¡No escalamos el ancho del trazo!
ADVERTENCIA @ línea 16 ¡No escalamos el ancho del trazo!

Regla 3: no uses máscaras. Las capas enmascaradas no se identifican en los dibujos vectoriales.

Regla 4: sin grupos. Crea una gran cantidad de código no deseado que crea un desorden mientras se convierte en vectores dibujables.

Regla 5: Sin rotación. No voltear. Sin transformación

Su mesa de trabajo final debería ser algo similar a esto.

Esta forma sigue todas las reglas. Relleno, borde interior, sin máscara, sin grupos y sin transformación.

Aquí está el SVG limpio exportado desde Sketch teniendo en cuenta las reglas anteriores.

    
 24x24 dp 
 Creado con Sketch. 
 

            
 
        

    

    

        

            
 
        

    

Este proceso largo y cuidadoso asegura que los SVG que exporta se convierten en elementos vectoriales limpios. La conversión de los más de 200 íconos a SVG seguramente nos llevó algún tiempo. Pero en el lado positivo, el tamaño de la aplicación descargable se redujo en un 30%.

Actualización: Se han agregado algunas características principales al Sketch 43. Pronto escribiré sobre ellas.