Usar imágenes vectoriales en iOS

Hace ya mucho tiempo que es común en Android usar SVG como formato de imagen para iconos. ¿Nadie se ha preguntado si usar imágenes vectoriales en iOS es posible?

Pues si es posible y muy fácil.

Usa imágenes vectoriales en iOS

Por qué usar vectores

La característica principal de los vectores es su escalabilidad. Podemos agrandar la imagen todo lo que queramos sin sacrificar en absoluto la calidad del trazo. También cabe añadir que las imágenes vectoriales ocupan mucho menos que las imágenes rasterizadas como PNG o JPG. Esto se debe a que las imágenes vectoriales son un fichero de texto con la información necesaria para pintar la imagen. Teniendo en cuenta que del peso total de una app el 70-80% es peso de imágenes veremos una amplia mejoría en tamaño y eso siempre lo agradecen los usuarios.

Formato PDF

Para usar formatos vectoriales en iOS usaremos el formato PDF, que es parecido a SVG. Los programas para diseño más avanzados como Sketch o Adobe tienen las herramientas necesarias para exportar iconos en formato PDF.

Desde cuando

Hace mucho tiempo ya que XCode acepta PDF en los assets pero es cierto que no se mejoró del todo esta funcionalidad hasta XCode 9 (iOS 11) por ello solo podremos usar esta característica si nuestra app soporta versiones de iOS 11 en adelante.

Por fin llegamos al cómo

Primero nos vamos al archivo Assets.xcassets en nuestro proyecto. Arrastramos una imagen PDF a nuestro assets como haríamos con una imagen normal y se nos creará automáticamente un image set con tres espacios y solo relleno el 1x. Ahora es cuando tenemos que configurar bien la imagen. Abrimos el menú lateral derecho y marcamos la casilla que dice Preserve Vector Data y donde pone Scales seleccionamos Single Scale.

• Preserve Vector Data: Si dejamos esta casilla desmarcada lo que hará XCode es que en tiempo de compilación generará a partir de la imagen PDF los tres tamaños 1x,2x,3x en formato PNG por lo que perderemos la opción de escalar la imagen. Al marcar esta casilla lo que le estamos diciendo a XCode es que en vez de usar una imagen como tal lo que va a hacer es convertir esta imagen vectorial en capas lo que hará que se renderice la imagen a la velocidad a la que se renderiza la vista 60 fps y no tendremos problemas de escalado.
• Single Scale: Al marcar single scale lo que le estamos diciendo a XCode es que solo hay una imagen disponible para tratar, esta opción mejora la compilación pero no afecta de otro modo al rendimiento de la vista.

Cosas a tener en cuenta

Cuando previsualicemos las imágenes PDF en Storyboard o XIB notaremos que se ven borrosas… no pasa nada, esto se debe a que XCode usa un thumbnail de la imagen para cargar la preview en los Interface Builders. Cuando ejecutemos la app la imagen se verá perfectamente.

Hay que tener cuidado también cuando usemos este tipo de imágenes en UITabBar o cómo imágenes de UINavigationItem ya que el control espera un tamaño de imagen específico y si usamos PDF hará cosas raras con el tamaño y el render de la imagen.