Chess, SVG, Vectores y Drawables (Parte II)

Vamos a dedicar un segundo post a tratar el tema del imágenes vectoriales y los archivos SVG por la importancia que estos tienen para las aplicaciones móviles, y el mundo nuevo que representan las imágenes vectoriales (SVG, IA) respecto a las imágenes de mapa de bits (JPG, GIF, PNG) que al menos yo estoy mas acostumbrado a trabajar.

En el post anterior vimos algunos conceptos básicos sobre la imágenes vectoriales. Hablamos del software open source y gratuito inkscape como una muy interesante alternativa al illustrator. Y vimos también una forma básica de convertir un PNG a SVG con el inkscape.

Pero nos quedó la sensación que vale la pena desarrollar un poco mas el tema, y hacer algunas pruebas mas para seguir entendiendo este formato.

Por ejemplo: ¿Que otros métodos hay para convertir PNG a SVG? ¿Los distintos métodos generan los mismos resultados? ¿Podemos ver una muestra mas grande de ejemplos? ¿Como se interpreta el xml que está dentro del archivo SVG?

Comencemos

Metodo 01: Convertir PNG a SVG con Inkscape

En el post anterior vimos como utilizar Inkscape para convertir PNG a SVG
El siguiente video de you tube también da una buena explicación sobre el mismo procedimiento:

https://www.youtube.com/watch?v=i9D2HFVJ9Xs

Este video, tomando como ejemplo a "Hello Kitty" es mejor para mostrar la técnica:
https://www.youtube.com/watch?v=bD29KTVHht4

Vamos a probar otro método para el mismo resultado:

Metodo 02: Convertir PNG a SVG con vectorizer.io

Probaremos los resultados con http://www.vectorizer.io/  

Veamos la vista previa que nos ofrece la aplicación, para ver el Zoom y la definicón: 

Ahora comparemos la conversión de PNG, al SVG con los software inkscape y la página vectorizer: 

Metodo 03: Convertir PNG a SVG a mano alzada

Hay otra técnica, que es mas avanzada para mi, ya que se necesitan habilidades mas de dibujante que de programador, que consiste en "dibujar" los trazos sobre la imagen a mano, en vez de dejar que el software haga ese trabajo. Seguramente los resultados sean mejores, pero habrá que desarrollar una técnica y practicarla. 

Comparto un video que muestra esta técnica, pero ya creo que escapa al alcanza del post y esta fuera de los objetivos que estoy buscando en el contexto de utilizar algunos SVG dentro de las aplicacione móviles:

https://www.youtube.com/watch?v=6JBm4QL0iCc

El Formato SVG

Comparemos las imágenes SVG que supimos obtener, de los reyes negros: Una utilizando inkscape y la otra utilizando vectorizer.io

Observemos que con inkscape logramos una única capa de imágenes. (La información de la imágen es un único bloque de color verde)

Mientras que con vectorizer tenemos varias capas, ya que utilizaron una técnica de tener una única capa por color:

Demos un paso mas, y volvamos a una imagen del illustrator: ¿Como es su formato? ¿Tendré distintas capas? ¿Las podré aislar manipulando el XML? ¿Podré rotar el peón o el caballo para enderezar el gráfico?

Estas preguntas, después de abrir la imagen con inkscape, vemos que es solo una capa.

Creamos a nuestros SVG (II)

Vamos a crear nuevamente a nuestros archivos de piezas de ajedrez, en formato SVG, siguiendo las recomendaciones del video:

https://www.youtube.com/watch?v=bD29KTVHht4 

Veamos un par de pantallas intermedias:

Veamos como la imagen queda vectorizada, con 6 pasadas, o sea tomando seis de los colores, y dejando cada color en una capa original.

 La secuencia completa, se puede ver en el minisitio del hosting:

http://mw000561.ferozo.com/pncn/chess/post_png2svg/v1/index_2.html

 A continuación mostramos la secuencia, donde comparamos los distintos tamaños SVG

Veamos con un zoom, la calidad de las imágenes vectoriales que generamos con inkscape, la cual es bastante aceptable de acuerdo a nuestras expectativas:

Por último, veamos el SVG en su contenido XML, el cual, con este barrido de 10 secuencias es muy prolijo: O sea, tiene 10 capas, una para cada color....

Tener un SVG con un XML mas estandar me parece un punto interesante, que confirma que el procedimiento para obtener SVG a partir de PNG de esta manera esta bien encarado,

Si comparamos este XML del SVG, con los que generaban los procedimientos del post anterior (parte I) veremos que efectivamente son mas prolijos y pequeños, y por lo tanto más cómodos para manipular e incluir en la aplicaciones,

Conclusiones

Estamos en condiciones de cerrar el post sobre las imágenes SVG, con el objetivo alcanzado, de conocer un procedimiento confiable para obtener imágenes vectoriales a partir de imágenes de mapa de bits.