En este artículo voy a seguir explicando cómo funciona el código SVG que venimos utilizando en la serie de artículos de este mes. Esta serie está dedicada a cómo combinar Inteligencia Artificial y programas de software libre para la creación de contenidos. Estoy poniendo énfasis en la creación de imágenes porque es mi talón de Aquiles. También puede funcionar genial en contenido con formato texto.

A riesgo de resultar cansador, insisto con que solo pedirle a nuestro modelo preferido que haga algo es desperdiciar sus posibilidades. Cuando sabemos qué es lo que queremos y podemos describirlo adecuadamente, mejores resultados lograremos.

Imagino la objeción que me plantearás si no leíste los artículos anteriores. ¿Para qué el software libre si podemos darle al modelo un prompt más completo y que haga todo el trabajo?

Hay tres respuestas: calidad, economía y privacidad.

1. Calidad: Los resultados del contenido generado por Inteligencia Artificial se terminan pareciendo. Puedes probar modificando parámetros o con diferentes prompts, pero a la larga te termina tomando mucho tiempo. Por otra parte, ya Anthropic, la empresa detrás de la familia de modelos Claude, empezó a poner marcas de agua a los contenidos que genera. Y la gente está empezando a valorar más los contenidos creados por seres humanos.
2. Economía: La generación de imágenes usando modelos de Inteligencia Artificial es muy exigente en el consumo de recursos. Eso hace que en los modelos gratuitos existan límites bajos y en los de pago sea más costoso. Al trabajar con código en lugar de píxeles, el consumo de recursos es menor.
3. Privacidad: Al trabajar con un formato de imágenes que permite ser creado o modificado por código, podemos utilizar modelos locales sin necesidad de tener un hardware potente.

Explicando cómo funciona nuestro código SVG

Tomando como base una plantilla de infografía, le pedí a ChatGPT que creara una versión en formato SVG. Dado que no fui específico en el prompt, no obtuve una recreación exacta, pero sí adecuada para mis propósitos. Esta es la infografía sobre la cual vamos a trabajar.

Y este es el código del archivo SVG:

La bombilla eléctrica

Habíamos dejado nuestra explicación del código en el trazado de los paneles. Vamos a continuar con el contenido interior de los mismos.

Líneas 86 a 99

En estas líneas se trazan los círculos numerados que vemos en cada panel. Las líneas 87 a 92 son las que construyen los círculos de colores. Siendo:

• cx: Ubicación en píxeles a partir del margen izquierdo.
• cy: Ubicación en píxeles a partir del margen superior.
• fill: El color de relleno del círculo (a cada uno se le asigna un color de gradiente que definimos al inicio).
• stroke: El color del borde del círculo.
• stroke-width: El ancho del borde del círculo.

Las líneas 92 a 98 le asignan un único color y opacidad a los círculos interiores.

Acá es donde la cosa se empieza a poner interesante.

Líneas 102 a 112

En la línea 102 le indica al programa que, para este grupo de instrucciones, tiene que tomar como origen las coordenadas 144, 223 a partir de la esquina superior izquierda del lienzo.

En las líneas siguientes tenemos la instrucción path d. Path es un comando SVG que se usa para definir una ruta mientras que el atibuto d controla el trazado de esa ruta.

Los parámetros son:

• M (Move to o mover a): Mueve el cursor a una coordenada sin dibujar nada.
• L (Line to o línea hasta): Dibuja una línea recta desde donde está el cursor hasta la coordenada que se le indica.
• H (Horizontal line o línea horizontal): Dibuja una línea recta horizontal, solo cambiando la coordenada x.
• C (Cubic Bézier curve o curva cúbica de Bézier): Traza una curva suave indicándole el punto de control 1, el punto de control 2 y la coordenada final.
• Z (Close path o cierre de la ruta): Completa el dibujo trazando una línea recta desde el punto actual hasta el punto de comienzo.

Entre las líneas 103 a 106 sucede lo siguiente:

1. M-19 4: Mueve el cursor hacia el lugar de comienzo del dibujo. Recuerda que movimos el origen del dibujo con el comando anterior, por lo que las nuevas coordenadas son en relación con el nuevo origen.
2. C-19-13 -8-26 7-26: Traza una curva hacia arriba y a la derecha; de esta forma, dibuja el lado izquierdo superior de la bombilla.
3. C22-26 31-14 31 1: Traza la curva que forma la parte superior redondeada o cabeza de la bombilla.
4. C31 11 26 18 18 25: Esta curva que baja comienza a construir el lado derecho de la bombilla, empezando a estrecharse.
5. C13 29 12 34 12 38: Dibuja la curva que termina de cerrar el lado derecho.
6. H-8: Dibuja una línea horizontal hacia el lado izquierdo para trazar la base plana de la bombilla.
7. C-8 31 -10 28 -15 23: Traza una curva que sube por el lado izquierdo de la base.
8. C-18 19 -19 13 -19 4: Traza la curva que cerrará el lado izquierdo de la bombilla, retornando casi al punto de partida.
9. Z: Completa el dibujo trazando una línea recta.
10. fill=»#e8f8ff» stroke=»#4b9ec9″ stroke-width=»2.5″: Rellena la bombilla con un color azul claro, establece para el borde un color un poco más oscuro y establece el ancho del dibujo en 2,5 píxeles.

A la línea 107 le corresponde dibujar la rosca de la bombilla. Tenemos las siguientes instrucciones:

1. M-7 39: Ubica el lápiz debajo de la base plana que acabamos de trazar.
2. H12: Traza una línea horizontal que será la primera rosca del casquillo.
3. M-5 45: Baja un poco el cursor para trazar la segunda rosca.
4. H9: Dibuja una línea horizontal más corta para la segunda rosca.

La línea 108 dibuja el filamento de la bombilla. Las instrucciones son:

1. M-5 8: Mueve el punto de origen del dibujo a una posición adentro de la bombilla.
2. L2 0: Línea en diagonal hacia arriba a la derecha.
3. L7 9: Continúa el zigzag trazando una línea diagonal, pero esta vez hacia abajo y hacia la derecha.
4. L15 0: Completa el zigzag dibujando una línea en sentido diagonal hacia arriba a la derecha.
5. class=»ln»: Aplica al dibujo trazado estilos que definimos al principio del código.
6. stroke=»#78909c»: Le da a los filamentos un color gris azulado.
7. stroke-width=»3″: Establece el ancho de las líneas en 3 píxeles.

Y finalizamos con la línea 169, donde se dibujan los rayos exteriores con las siguientes indicaciones.

M-30-8 L-40-13: Dibuja una línea corta en la esquina superior izquierda apuntando hacia abajo.

M-31 13 L-42 18: Dibuja una línea corta en la esquina inferior izquierda apuntando hacia arriba.

M28-9 L39-14: Dibuja una línea corta en la esquina superior derecha apuntando hacia abajo y a la derecha.

M30 13 L42 18: Dibuja una línea corta en la esquina inferior derecha apuntando hacia abajo y a la izquierda.

En el próximo artículo continuaremos analizando el código de la infografía para entender cómo modificarlo a nuestro gusto.

Artículo original