Edición SVG con ChatGPT

Hace muchos años estuve involucrado en un proyecto que formaba parte de una iniciativa de código abierto. Esta experiencia no solo amplió mi comprensión del software libre, sino que también me permitió descubrir las potentes capacidades de Inkscape y las bondades del SVG. 

Inkscape es un programa de edición de gráficos vectoriales que destaca por su compatibilidad con el formato de archivo SVG (Scalable Vector Graphics). Ambos me han sido muy útiles tanto en el ámbito profesional como en el personal. La interfaz de Inkscape es intuitiva, lo que la hace ideal para usuarios de todos los niveles, y, sin embargo, esta facilidad de uso no compromete su amplia variedad de funciones. Hoy es una herramienta indispensable de mi caja de herramientas, a pesar de que yo no use ni la mitad de su potencial.

Tenemos principalmente dos tipos de gráficos: los vectoriales y los rasterizados. Los gráficos vectoriales, a diferencia de los rasterizados que están formados por píxeles, se crean a partir de ecuaciones matemáticas que definen puntos, líneas y curvas. Esta característica les otorga una gran ventaja: la escalabilidad. Un gráfico vectorial puede aumentar o disminuir su tamaño sin perder calidad, lo que lo hace ideal para múltiples aplicaciones.

Otra de las grandes ventajas de los gráficos vectoriales es su tamaño de archivo, generalmente más pequeño en comparación con los gráficos rasterizados, especialmente en imágenes grandes. Esto, sumado a la facilidad con la que se pueden editar, los convierte en una herramienta poderosa y flexible para los profesionales del diseño y la ilustración.

Entre los formatos vectoriales más populares, encontramos el SVG (Scalable Vector Graphics), del que ya hablamos en el artículo Generadores de código especializado. Se trata de un estándar abierto desarrollado por el World Wide Web Consortium (W3C). Esta naturaleza abierta fomenta la transparencia, la accesibilidad y la colaboración, principios fundamentales del movimiento de código abierto. Muchos programas, incluyendo Inkscape, utilizan SVG como su formato nativo o compatible, lo que permite una amplia interoperabilidad entre diferentes aplicaciones de software. 

Inkscape no solo es un software de edición de gráficos vectoriales gratuito, sino que también es un proyecto de código abierto. Esto significa que cualquier persona puede contribuir al desarrollo y mejora del software, y de hecho la comunidad de Inkscape es un elemento muy importante en su desarrollo continuo. Esta comunidad no solo contribuye con código, sino también con tutoriales, consejos y soporte técnico. Esta colaboración colectiva ha creado un entorno en el que los usuarios novatos pueden aprender rápidamente y los usuarios avanzados pueden explorar nuevas posibilidades. La naturaleza de código abierto de Inkscape también asegura que el software se mantenga actualizado con las últimas tendencias y necesidades del diseño gráfico, lo que lo convierte en una herramienta muy valiosa para profesionales y aficionados por igual.

ChatGPT, en todas sus versiones, posee una comprensión básica del estándar SVG y puede realizar tareas sencillas relacionadas con este formato, como generar y manipular su código para ilustraciones básicas, diagramas, gráficos, etc. Además, la funcionalidad de 'ChatGPT with Python', incluida en ChatGPT PLUS, eleva significativamente estas capacidades ya que puede ejecutar scripts para crear gráficos vectoriales algo más complejos, ofreciendo una mayor precisión y personalización en el diseño de SVG. 

Aunque los resultados son muy básicos, y solo tienen interés "científico", la combinación de DALL-E (o cualquier imagen proporcionada por el usuario) y "ChatGPT with Python" en ChatGPT PLUS, permite probar la vectorización de imágenes JPG o PNG (rasterizados). El proceso puede comenzar con la solicitud de una imagen, de la que posteriormente pedir su vectorización para generar un SVG. 

Genera una imagen sencilla de un gato en estilo vectorial.

Después crea un SVG con Python que sea la vectorización del gato que generaste antes.

Hay muchas herramientas para la vectorización de rasterizados, de hecho, Inkscape cuenta con una funcionalidad que lo permite. También tenemos herramientas online muy reconocidas, como VTracer o el mismísimo Adobe Express. Como ya os decía, el sentido de hacerlo con ChatGPT PLUS es "científico", y viene a demostrarnos que la funcionalidad "ChatGPT with Python" siempre tiene mayor versalitilidad de la imaginada.

Muy interesante también, es la generación de diagramas en SVG mediante "ChatGPT with Python". Cuando comencé a generar diagramas con ChatGPT lo hacía pidiéndole el código Mermaid (ver Generadores de código especializado), sin embargo, comprobé más tarde que Python podía generarlo en SVG. Aunque se puede pedir un diagrama directamente en este formato, nosotros pediremos antes el código Mermaid (o Graphviz o cualquier otro tipo de código para gráficos), lo cual arrojará mejores resultados, por lo general:  es posible que sea porque un "entrenamiento" previo siempre viene bien. Podemos también pedir directamente el diagrama en formato rasterizado y no usar el formato SVG, pero aquí lo hacemos así para que posteriormente pueda ser editado con Inkscape.

Dame el código Mermaid de un diagrama que represente el ciclo del agua, sin hacer uso de Python. 

Luego genera un fichero SVG con Python que contenga el diagrama del ciclo del agua, sin pretender hacer la conversión entre código Mermaid y SVG, y dame un enlace para descargarlo.

Podéis quitar alguno de los matices que hemos añadido a la petición (p.e. "sin hacer uso de Python" o "sin pretender hacer la conversión entre código Mermaid y SVG") para que veáis el comportamiento de ChatGPT y por qué hemos decidido añadirlos.

También podéis añadir que os muestre el SVG rasterizado si no tenéis herramienta para visualizarlo (como Inkscape), o simplemente os apetece verlo desde ChatGPT. Si da problemas esta conversión es posible que sea necesario volver a generar el SVG: el problema suele ser la "falta de dimensiones específicas en el archivo" según el propio ChatGPT.

Rasteriza el diagrama contenido en el SVG y muéstrame la imagen resultante.

Y por último, podéis solicitar cambios en el SVG generado para que tenga características más adecuadas a vuestras necesidades.

Modifica el SVG para que en vez de círculos blancos use rectángulos azules. 

También podemos modificar la forma en que ChatGPT ha organizado el conjunto de elementos del diagrama para que sea más legible.

Organiza los elementos del diagrama en SVG de tal modo que sean más fáciles de comprender y el conjunto sea más didáctico. 

E incluso podemos pedir a ChatGPT que organice el conjunto de una manera concreta.

Organiza los elementos del digrama en SVG de forma jerárquica.

Debido al caracter "azaroso" de las respuestas de ChatGPT no tendréis siempre resultados mínimamente satisfactorios, y en ocasiones, ni tan siquiera resultados. Intentadlo varias veces si es necesario, afinad los prompts para acercaros a lo que esperáis, y en cualquier caso, no esperéis nada sofisticado: seguimos apelando al interés "científico".

Aquí os muestro un par de resultados. En los dos casos se ha pedido a ChatGPT algunos ajustes en la organización de los elementos. 

Y aquí con unos pequeños retoques con Inkscape.

No hemos explorado la capacidad de "ver" de ChatGPT Plus en este contexto: ¿y si hacemos un boceto del diagrama que queremos y se lo mostramos para pedirle que lo genere con SVG, o incluso que afine el que ya generó anteriormente? Eso lo veremos en otro artículo.

El empleo conjunto de SVG, ChatGPT PLUS e Inkscape puede ser un caso de uso de interés para nuestra productivad. Sin embargo, lo verdaderamente destacable es la constatación de que la integración de ChatGPT con los formatos y herramientas que ya utilizamos ofrece un gran potencial. Esta sinergia no solo puede facilitar y enriquecer nuestras tareas diarias, sino que también abre nuevas vías para la innovación y la eficiencia en el manejo de gráficos y diagramas.