Más explicaciones sobre el código SVG
En el cuarto artículo de esta serie voy a dar más explicaciones sobre el código SVG que estoy usando de ejemplo sobre cómo combinar Inteligencia Artificial y software libre.
Aunque suene tedioso y repetitivo que me extienda tanto, es necesario para entender después las modificaciones que vamos a hacer.
El resto de los componentes de la infografía
Esta es la captura de pantalla de una infografía que un modelo de Inteligencia Artificial construyó inspirada en otra que le proporcioné. La imagen original no la puedo subir por limitaciones de nuestro gestor de contenidos.
La imagen con la que estamos trabajando está en formato SVG, que consiste en una serie de instrucciones sobre cómo trazar los diferentes componentes de la imagen. Las instrucciones son estas.
Habíamos dejado la explicación en el trazado de la bombilla. Continuaremos ahora con el resto de los componentes.
El diagrama de flujo
Las instrucciones para el trazado del dibujo están entre las líneas 114 a 121.
La línea 114 establece el punto de inicio del dibujo y el color y ancho del trazo.
- transform=»translate(144 299)»: Mueve todo el dibujo a la posición X=144, Y=299 del lienzo principal, colocándolo debajo de la bombilla.
- stroke=»#4a9fc9″ y stroke-width=»1.7″: Establece el color y el ancho del trazo para todos los elementos del dibujo, salvo que expresamente se indique lo contrario.
La línea 115 traza las líneas conectoras.
- M0-26: Mueve el lápiz a (0, -26), debajo de la rosca de la bombilla.
- V-8: Dibuja una línea vertical hasta Y=-8 (18 píxeles de largo). Esta línea conecta la rosca de la bombilla con la imagen del rombo que todavía no dibujamos.
- M0 8 V22: Traza una línea vertical.
- M0 8: Mueve el lápiz a (0, 8), justo debajo del rombo que todavía no dibujamos.
- V22: Dibuja una línea vertical hasta Y=22 (baja 14 píxeles). Es la línea que conectará el rombo con la línea horizontal que dibujamos antes.
- M-39 22 H39: Traza la línea horizontal que conectará las tres cajas todavía no dibujadas.
- M-39 22: Mueve el lápiz a (-39, 22), en el extremo izquierdo.
- H39: Dibuja una línea horizontal hasta X=39 (recorre 78 píxeles hacia la derecha).
Un detalle importante es que los comandos V y H solo necesitan un parámetro, ya que la otra coordenada permanece inalterada.
En la línea 116 se dibuja la caja superior.
- x=»-11″ y=»-42″: Posición de la esquina superior izquierda. Está calculada para que, con el ancho que establecemos después, la imagen quede centrada horizontalmente.
- width=»22″ height=»17″: Establece que la imagen tendrá un tamaño de 22 x 17 píxeles.
- rx=»2″: Redondea ligeramente los bordes.
- fill=»#a9def3″: Rellena la caja con un color azul claro.
No se establecieron características para el borde, por lo que se usará el estilo general.
La línea 117 traza el rombo.
- M0-4: Establece la posición del punto superior del rombo.
- L10 5: Traza una línea diagonal hacia abajo y hacia la derecha como primer lado del rombo.
- L0 14: Traza una línea diagonal hacia abajo y hacia la izquierda como el otro lado de la parte superior del rombo.
- L-10 5: Traza una línea diagonal hacia abajo y hacia la izquierda como primer lado de la parte inferior del rombo.
- Z: Cierra la figura completando la parte inferior.
- fill=»#f8c55a»: Relleno amarillo/dorado.
Voy a saltarme las líneas 124 a 135 porque el dibujo de lo que deberían haber sido dos manos estrechándose no resultó bien logrado y lo eliminaremos posteriormente.
El diagrama de torta
Ocupa las líneas 138 a 145.
La línea 138 establece el punto de origen del dibujo.
transform=»translate(327 300)»: Establece como punto de origen X=327, Y=300 del lienzo principal. Este punto será el centro del gráfico y todo se dibujará alrededor.
La línea 139 traza el círculo base.
- r=»39″: Establece el radio de 39 píxeles. No se establecen los parámetros cx ni cy porque se usarán las coordenadas indicadas como punto de inicio.
- fill=»#e9f9f1″: Rellena el círculo con un color verde claro.
- stroke=»#54b993″ stroke-width=»2″: Establece para el trazo un borde verde un poco más oscuro y un ancho de 2 píxeles.
A continuación se dibujan las porciones del gráfico de torta. Para esto introducimos un nuevo comando: A, que es la letra inicial de Arc (arco). Esto es bastante explícito por sí mismo respecto de lo que hace.
La sintaxis de este comando es:
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
Donde:
- rx ry: Indican los radios X e Y del arco. Si queremos trazar un círculo, debemos establecer valores iguales para ambos radios.
- x-axis-rotation: Indica la rotación del eje del arco. En un círculo perfecto, este valor no afecta al resultado visual.
- large-arc-flag: 0 para un arco pequeño (hasta 180°), 1 para un arco grande (más de 180°).
- sweep-flag: 0: traza el arco en sentido contrario a las agujas del reloj; 1: lo traza en el sentido de las agujas del reloj.
- x y: Indican el punto final del arco.
Veamos las porciones de nuestra torta.
La línea 140 traza la porción de color verde de arriba a la derecha.
- M0 0: Pone como comienzo del dibujo las coordenadas que establecimos antes.
- V-39: Traza una línea vertical hacia arriba hasta (0, -39), que es el punto más alto del círculo.
- A39 39 0 0 1 33 20: Crea un arco pequeño con radio 39 en X e Y, sin rotación. El arco se traza en el sentido de las agujas del reloj y termina en las coordenadas (33, 20).
- Z: Cierra la forma trazando una línea hasta el origen.
- fill=»#56bd98″: Rellena la figura con el color verde.
La línea 141 se encarga de la porción amarilla que está abajo a la derecha.
- M0 0: Indica que el comienzo del dibujo será en el punto de origen establecido.
- L33 20: Traza una línea hasta el punto donde termina la porción anterior.
- A39 39 0 0 1 -24 31: Traza un arco hasta las coordenadas (-24, 31).
- Z: Cierra la figura trazando una línea hasta el centro.
- fill=»#f3bf51″: Rellena la figura resultante con un color amarillo.
La línea 142 traza la porción azul ubicada abajo a la izquierda.
- M0 0: Otra vez comenzamos desde el centro establecido para el dibujo.
- L-24 31: Traza una línea hasta donde terminamos la porción amarilla.
- A39 39 0 0 1 -39 0: Traza un arco hasta (-39, 0), que es el punto más a la izquierda.
- Z: Cierra la figura.
- fill=»#65aee0″: La rellena con un color azul.
La línea 143 dibuja la porción que nos falta, de color verde claro, ubicada arriba a la izquierda.
- M0 0: Una vez más comenzamos desde el centro.
- L-39 0: Traza una línea horizontal hacia la izquierda.
- A39 39 0 0 1 0-39: Traza un arco hacia arriba, hasta las coordenadas (0, -39).
- Z: Cierra la figura.
- fill=»#bfe7d6″: Rellena la figura con un color verde claro.
La línea 144 traza el círculo decorativo del centro.
- circle r=»2.5″: Traza un círculo con un radio de 2,5 píxeles.
- fill=»#718b95″: Lo rellena con un color azulado.
En el próximo artículo completaremos el trazado de los componentes que nos faltan para empezar la modificación.
