Analizando el código de la infografía SVG
Como base a nuestro tutorial sobre cómo trabajar con modelos de Inteligencia Artificial y software libre, vamos a seguir analizando el código de la infografía SVG que creamos. El tema se me extendió más que las historias de Rick Riordan y la parte más divertida va a quedar para la serie de posteos del mes que viene.
Mientras tanto, trataré de condensar en las palabras que tengo disponibles del cupo mensual para terminar de describir los iconos que nos quedan.
Analizando el código de la infografía SVG
El gráfico de flujo de la información
Ahora vamos con otra imagen compleja, compuesta de varias partes, que representa el diagrama de flujo de análisis de la información. Como vemos, la imagen está conformada por:
- Dos entradas con el símbolo de datos validados.
- Un nodo central de procesamiento al que llegan ambas entradas.
- Dos salidas o resultados.
Veamos el código:
Creando el contenedor
Como hicimos con todo el resto de los componentes, en la línea 173 trasladamos el origen (0,0) a la posición X=696, Y=222 del lienzo principal. Será este centro a partir del cual se construya el gráfico.
Las cajas de ingreso de datos
Las líneas 174 a 177 se ocupan de dibujar la caja de la izquierda con estas características:
- Dibuja la caja con un ancho de 25 píxeles y un alto de 20. La rellena de un color naranja muy claro y establece un borde redondeado en un naranja más oscuro.
- Dibuja el símbolo de chequeado (✓) adentro de la caja. Empieza arriba a la izquierda, baja al centro y sube a la derecha. Le asigna el estilo preestablecido al comienzo del código para todas las líneas de la infografía: un color naranja más oscuro y un ancho de línea de 2 píxeles.
Entre las líneas 178 a 181 se dibuja la caja de la derecha con las mismas instrucciones, pero desplazando las coordenadas.
Las líneas conectoras
Su trazado se maneja desde las líneas 182 y 183 del código. Ellas contienen un path que dibuja dos caminos simétricos que se encuentran en el centro. Para esto usa las instrucciones V (Vertical) y H (Horizontal) para trazar las líneas con un mínimo de parámetros.
- Lado izquierdo: Mueve el punto de inicio del dibujo debajo de la caja izquierda. Traza una línea vertical que desciende, traza una línea horizontal hasta la derecha y otra que desciende hasta el nodo central de procesamiento.
- Lado derecho: El dibujo sale de debajo de la caja derecha, traza una línea hacia abajo, traza otra línea hasta la izquierda que se encuentra con la trazada previamente y luego una que conecta con el nodo central de procesamiento.
En ambos casos se les asigna a las líneas el mismo estilo del resto del sitio, un color asalmonado y un ancho de 3 píxeles.
El nodo central de procesamiento
Se traza desde las líneas 184 y 185 del código. Un dato importante es que en las instrucciones de los dos círculos que conforman esta imagen se omite la coordenada x (instrucción cx), porque en ambos casos dicha coordenada es 0.
- El primer círculo es de color naranja claro, con un radio de 11 píxeles y un ancho de trazo de 2 píxeles. El relleno es un blanco cálido.
- El segundo es un punto naranja del color del borde del otro.
Las cajas de salida
Se dibujan desde la línea 186 hasta la 189. Son ligeramente más grandes que las de entrada y tienen un color más oscuro para dar sensación de profundidad.
Las líneas conectoras
Las líneas que unen el nodo de procesamiento con las cajas conectoras se trazan en las líneas 190 y 191.
- Se dibuja una línea horizontal que une las dos cajas por el medio.
- Se dibuja una línea vertical que parte desde el nodo central, justo debajo del círculo, y termina uniéndose con la línea horizontal.
A ambas líneas se les asigna el estilo general del sitio, un ancho de 3 píxeles y un color entre naranja y marrón.
Este diseño incluye las siguientes características:
- Economía: El diseñador usó un solo comando d para dibujar las dos ramas laterales de las líneas conectoras, lo que ahorra código.
- Uso criterioso de los valores por defecto (Default values): Al no poner cx=»0″ en el círculo central, el navegador asume que es 0. Esto reduce tiempo tanto en la escritura como en la lectura de código.
- Uso de rutas ortogonales: La construcción de los conectores usando los comandos V (líneas verticales) y H (líneas horizontales) ayuda a crear un diagrama de flujo con aspecto limpio y profesional.
- Adecuado uso del color: Todo mérito de ChatGPT, que eligió para las cajas de entrada un color naranja más claro, para las de salida un naranja más oscuro y un punto sólido en el centro del nodo central de procesamiento. Esto lleva el ojo del usuario a través del flujo: Entrada → Proceso → Salida.
Con esto cubrimos la parte de componentes de la infografía que vamos a reutilizar.
Cómo puedes crear tu propia recreación SVG de una imagen o infografía
Usando este prompt puedes obtener una recreación lo más fiel posible en formato SVG de una imagen proporcionada. Recuerda que funciona mejor con esquemas o diagramas.
————————-Inicio del promt————————-
Usa la imagen proporcionada como referencia visual principal.
OBJETIVO
Recrear la imagen de referencia utilizando SVG vectorial, tratando de conseguir la máxima fidelidad visual que sea posible.
PRIORIDAD
La imagen de referencia debe tener en todos los casos prioridad sobre cualquier interpretación creativa.
No debes rediseñar la imagen.
No debes modernizar el diseño.
No puedes agregar elementos que no estén presentes.
No puedes eliminar elementos gráficos importantes.
ANÁLISIS PREVIO
Antes de generar el código, analiza la imagen teniendo en cuenta:
1. La relación de aspecto.
2. El tamaño y la posición de los elementos.
3. Los márgenes.
4. La alineación.
5. La distribución vertical y horizontal.
6. Las formas geométricas.
7. Los colores.
8. Los gradientes.
9. Los bordes.
10. Las sombras.
11. Las transparencias.
12. Los iconos e ilustraciones.
13. Los elementos decorativos.
14. La jerarquía visual.
15. La profundidad y apariencia tridimensional.
COMPOSICIÓN
Actúa como si la imagen estuviera dividida en estas capas:
* Fondo.
* Marco.
* Elementos decorativos del fondo.
* Contenedores principales.
* Elementos superpuestos.
* Ilustraciones.
* Gráficos.
* Líneas y conexiones.
* Elementos decorativos pequeños.
* Sombras y brillos.
Construye el SVG siguiendo ese orden.
GEOMETRÍA
Utiliza coordenadas y dimensiones proporcionales a la imagen original.
En caso de que encuentres elementos repetidos:
* Utiliza exactamente las mismas dimensiones.
* Mantén la misma separación.
* Mantén la misma alineación.
* Cambia solamente el color cuando corresponda.
Ten en cuenta que las posiciones relativas son siempre más importantes que la cantidad de código.
FORMAS
Utiliza elementos SVG apropiados:
* rect para rectángulos.
* circle para círculos.
* ellipse para elipses.
* line para líneas.
* polygon para polígonos.
* path para formas complejas.
* g para agrupar elementos.
Evita convertir todo en paths si una forma geométrica simple puede representarse directamente.
COLOR
Extrae visualmente los colores de la imagen de referencia.
Reproduce:
* Los colores principales.
* Los colores secundarios.
* Los colores de los bordes.
* Las transparencias.
* Los degradados.
* Los brillos.
* Las sombras.
Evita colores genéricos cuando la imagen tenga una paleta claramente definida.
SOMBRAS Y PROFUNDIDAD
Si la imagen tiene apariencia tridimensional, utiliza:
* linearGradient.
* radialGradient.
* opacity.
* filtros SVG.
* feDropShadow cuando sea apropiado.
Las sombras deben ser suaves y discretas.
ILUSTRACIONES
Reproduce las ilustraciones mediante formas vectoriales.
Nunca las sustituyas por símbolos genéricos.
Por ejemplo:
* una bombilla debe parecer una bombilla;
* un cohete debe parecer un cohete;
* un gráfico circular debe conservar sus sectores;
* un diagrama debe conservar sus conexiones.
TEXTO
Si se solicita eliminar el texto:
NO incluyas:
* letras;
* palabras;
* números;
* caracteres;
* tipografías.
Cuando el texto forme parte visual de la composición, puedes reemplazarlo por:
* líneas horizontales;
* rectángulos;
* pequeños bloques;
* elementos abstractos equivalentes.
El objetivo es conservar la estructura visual sin contenido textual.
FIDELIDAD
No intentes «mejorar» la imagen.
Si un elemento parece extraño, irregular o poco convencional, reprodúcelo igualmente si forma parte de la referencia.
La fidelidad visual tiene prioridad sobre la estética del SVG.
SVG
El resultado debe:
* ser SVG válido;
* ser completamente vectorial;
* funcionar sin conexión;
* no depender de recursos externos;
* no contener imágenes rasterizadas;
* no utilizar base64;
* no utilizar URLs externas;
* poder abrirse directamente en un navegador;
* conservar la relación de aspecto original.
CÓDIGO
Utiliza un viewBox proporcional a la imagen.
Organiza el código mediante grupos claramente separados por función.
Utiliza para:
* gradientes;
* filtros;
* elementos reutilizables.
Evita código innecesariamente complejo.
CONTROL DE CALIDAD
Antes de entregar el SVG, comprueba:
* ¿La composición general coincide con la referencia?
* ¿Los elementos tienen las mismas proporciones?
* ¿Las distancias son similares?
* ¿Los elementos están en las mismas posiciones?
* ¿La paleta es similar?
* ¿Las sombras y gradientes tienen una intensidad equivalente?
* ¿Las ilustraciones representan los mismos objetos?
* ¿Se eliminaron todos los textos?
* ¿El SVG es autónomo y válido?
Si la respuesta a alguna de estas preguntas es no, corrige el SVG antes de entregarlo.
SALIDA
Devuelve únicamente el código SVG.
No agregues explicaciones.
No agregues Markdown.
————————-Fin del promt————————-
Prometo no dar más vueltas y en el próximo artículo comenzar a trabajar en la edición de nuestra infografía.
