Cómo convertir una imagen a formato vectorial o SVG

Cómo convertir una imagen a SVG vectorial

En esta entrada vamos a ver dos posibles maneras para convertir imágenes rasterizadas o de mapas de bits (PNG, JPG, BMP, etc) al formato vectorial SVG con resultados bastante aceptables, a través de herramientas online y con el programa Inkscape.

Introducción

Las imágenes vectoriales utilizan objetos geométricos, como vectores y polígonos, para representar imágenes digitales a través de transformaciones matemáticas, a diferencia de las imágenes rasterizadas o de bitmaps, que como su nombre indica se forman por conjuntos de bits que representan la imágen a través de una matriz de píxeles.

El uso de gráficos vectoriales tiene ciertas ventajas, siendo una de las más apreciadas la posibilidad de redimensionar la imagen sin pérdida de calidad, y por ello nos puede resultar muy conveniente, por ejemplo, para implementar algunos de los aspectos de un sitio web responsive, con elementos cuya calidad no varíe en función del zoom del navegador.

Aunque hasta hace poco quizá era una técnica algo arriesgada desde la perspectiva de compatibilidad entre navegadores web, hoy en día la mayoría soportan SVG sin mayores problemas.

Obviamente lo lógico sería diseñar el logo en formato vectorial nativo haciendo uso de herramientas desarrolladas para tal finalidad. Pero si estás leyendo esta entrada, probablemente ya partes de una imagen de bitmaps y quieres convertirla, y lo quieres para ya, ¿no? 🙂

Típico caso

Un diseñador gráfico nos facilita un logo en formato final PNG, o diseño por capas del sitio web en formato PSD, y queremos transformar el logo o algunas de las partes de la plantilla a formato vectorial. ¿Cómo lo hacemos?

Métodos para convertir una imagen a SVG

Con herramientas online

Aunque quizá no es la manera más elegante, la verdad es que las herramientas online nos pueden facilitar enormemente la vida, y si ello conllevo ahorrar tiempo ($$$) y el resultado satisface nuestros estándares de calidad, ¿por qué no?

De entre las que he probado puntualmente, solo he encontrado una o dos que hagan una conversión fidedigna en la mayoria de casos. La primera de ellas es Vector Magic (http://vectormagic.com) y creo que no es necesario que hago un paso a paso pues es realmente sencillo.

Lo único que habrá que tener en cuenta es que a diferencia de algunas herramientas online en las que simplemente subes la imagen y la descargas, en Vector Magic es necesario registrarse (no es gran problema pero ya no es tan inmediato) y además la descarga a está limitada una imagen (esto sí es un poco más problemático). Puedes convertir las que desees, pero a partir de la segunda deberás pagar por el servicio. Por lo tanto, si estás buscando una conversión puntual que te saque del apuro, de momento puedes tirar por Vector Magic, y más adelante ya se verá (puedes usar el método 2 descrito más abajo) puesto que es una de las que hacen mejor la conversión a fecha del presente artículo.

Obviamente siempre se le puede buscar los tres pies al gato registrándose con cuentas diferentes, si es que te vale la pena el esfuerzo. En este caso casi que recomendaría probar con cualquiera de las otras herramientas online que puedes encontrar haciendo una búsqueda en Google tipo “PNG to SVG” o “SVG Converter” y ver qué tal. La mayoría dejan algo que desear y en función del tipo de imagen de orígen puede que obtengas una conversión decente o no (o directamente ninguna conversión).

Con el programa Inkscape

El segundo método que propongo es a través del infravalorado programa de retoque vectorial Inkscape (descargar de aquí), que además es de código abierto y podemos añadir a nuestro arsenal de herramientas freelancers sin tener que desembolsar dinero en una licencia más. ¿No es genial?

El procedimiento ha sido probado con la versión 0.91 para Windows pero debería resultar similar en otras versiones y/o plataformas. Es realmente sencillo y solo toma unos pocos pasos, aunque nos podemos entretener más si somos perfeccionistas y queremos mejorar el resultado.

Para el ejemplo he escogido el siguiente logo genérico en formato PNG, que además está en una resolución relativamente baja, lo cual nos permitirá apreciar mejor la ventaja de transformarlo al formato vectorial.

example-logo

1. Importar la imagen en Inkscape

Este paso no requiere apenas explicaciones. Dado que la opción Abrir… está destinada a archivos vectoriales, importamos la imagen rasterizada.

Convertir imagen a SVG con Inkscape

2. Vectorizar la imagen importada

Con la imagen previamente seleccionada a través de la herramienta Seleccionar y transformar objetos (F1), localizamos la opción en el menú Trayecto > Vectorizar a mapa de bits…

Convertir una imagen a SVG con Inkscape

 

A continuación se nos presenta el siguiente cuadro de diálogo en el que nos podemos entretener a probar distintas opciones para afinar el detalle con el que queremos la conversión (bordes suavizados, eliminar motas para imágenes con ruido, etc).

Si queremos convertir una imagen a color, como es el caso de ejemplo, deberemos cambiar el modo por defecto, tal y como se muestra en la siguiente imágen, y para verificar que el proceso se realizará correctamente, es interesante marcar la casilla de previsualización o Vista en directo.

tutorial-inkscape-03-v2

Pulsamos Aceptar y veremos que el diálogo no se cierra por defecto, ni muestra ningún mensaje de confirmación, lo cual puede resultar un poco confuso. Asumiremos que se ha realizado correctamente, en el siguiente paso lo vamos a verificar.

3. Eliminar el objeto original y realizar los retoques oportunos

Si seleccionamos la imagen y la desplazamos con la herramienta Seleccionar veremos que el objeto original ha quedado oculto debajo del nuevo objeto vectorial. Si no fuera el caso, significaría que algo ha salido mal en el momento de realizar el paso anterior. Es importante asegurarse que la imagen está seleccionada antes de realizar la vectorización.

PNG vs SVG

Podemos eliminar el objeto original y si el resultado nos satisface, ya habríamos terminado. En la imagen de arriba podemos observar, con tan solo un poco de zoom (clic en la imagen para ver a tamaño completo) cómo se diferencia el logo vectorial (derecha) del original (izquierda).

Algunas mejoras

Añadir nuestro propio texto

Aunque el icono del logo ha quedado bien, el resultado no es muy satisfactorio para las letras, que muestran muchos polígonos. Esto se podría haber mejorado marcando la opción de suavizado, aunque entonces habría afectado también a la parte superior del logo, creando lineas menos rectas.

En realidad, la vectorización no funciona muy bien para las fuentes y, de hecho, lo mejor en este caso probablemente sería recrear el nombre de la marca a partir de la herramienta Texto, particularmente si conocemos la fuente usada en la imagen original, o podemos encontrar una similar.

Texto en Imagen Vectorial

En la imagen superior se puede ver el texto añadido en una nueva capa y desplazado hacia la derecha para mayor claridad, pero podemos escribir directamente encima de las letras originales y redimensionar libremente con la herramienta Seleccionar y transformar objetos, hasta que haga matching con el texto original.

De hecho, no hace falta rasterizar el texto y convertirlo en objeto para redimensionarlo tanto a lo alto como a lo ancho, por lo que podemos hacer un ajuste bastante fino para ajustarlo a las dimensiones del texto original sin perder las propiedades del texto.

Solo hay que tener en cuenta que si finalmente optamos por añadir el texto, al final puede ser conveniente convertirlo a trayecto con la opción pertinente en el menú Trayecto > Objeto a trayecto para evitar que el navegador lo interprete como texto y pueda mostrarse mal en caso de que falte la fuente usada, o quede ligeramente descuadrado con respecto a nuestro diseño original. Al convertir el texto a forma, preservará su posicionamiento exacto en la imagen.

Eliminando las partes sobrantes

Finalmente podemos ocultar la capa superior y eliminar tanto las letras originales como las obtenidas a partir de la vectorización, para reemplazarlas por nuestro texto nativo.

Eliminar elementos de la imagen en Inkscape puede resultar algo más complicado que en un programa de edición de imágen tradicional en función de como se haya creado la imagen vectorial, ya que en muchas ocasiones los elementos de la imagen están conectados a través de formas geométicas y eliminar un nodo representa alterar la forma del elemento del que forma parte. Por lo tanto, no siempre sirvirá con seleccionar una zona con la herramienta Seleccionar y aplicar un recorte.

En este caso las letras estan aisladas y no hace falta realizar muchas filigranas. Lo que haremos será hacer clic con la herramienta Seleccionar y transformar varias veces en alguna de las letras que deseamos eliminar hasta que aparezcan los nodos que las conforman. En este momento podemos arrastrar y hacer una selección con la misma herramienta para englobar todos los nodos que forman el texto (veremos que están realzados como se muestra en la imagen inferior a la derecha) y pulsar la tecla Suprimir o botón derecho y Eliminar.tutorial-inkscape-06

Por como Inkscape vectoriza la imagen es posible que haya varias capas de texto, en este caso repetiríamos el proceso hasta eliminarlas todas. Afortunadamente y como las letras están separadas del logo, es posible eliminar el texto sin problemas.

Para eliminar una selección concreta de la imagen aún cuando forma parte de otros elementos harían falta técnicas más elaboradas, por ejemplo dibujar un rectángulo opaco y aplicar una operación booleana como la Diferencia entre objetos, que sustraerá la parte de la forma de la capa superior a la de la inferior. Un sencillo tutorial aquí, por si te interesa.

El resultado

Este es el resultado. Puedes hacer zoom en tu navegador con las teclas Ctrl+ y Ctrl- para ver como se preserva el detalle de la imagen en todo momento.

WordPress no permite subir archivos SVG a la plataforma por defecto, pero afortunadamente esto es fácil de solucionar ya sea a través de una pequeña modificación en el archivo functions.php o instalando un plugin como éste.

Resultado PNG a SVG

En resumen

En esta entrada hemos visto dos maneras de convertir una imagen rasterizada a vectorial, la más sencilla e ideal para un caso puntual, a través de herramientas online como Vector Magic, y la más elaborada y supervisada por nosotros, con el programa de diseño vectorial Inkscape, que además tiene la ventaja que nos permite seguir aplicando retoques a la imagen para mejorar el resultado.

Espero que el tutorial te haya resultado útil. Si finalmente crees que te vale más la pena delegar este tipo de tareas y centrarte en tu desarrollo, contacta conmigo y probablemente pueda mandarte mi lanza freelance al rescate 😉

Deja un comentario