Soluciones (3). Ficheros. SVG. Python. Bartolomé Sintes Marco. www.mclibre.org

Gráficos SVG Ficheros (3) - 1

Gráficos SVG Ficheros (3) - 1 - Figura 1

import webbrowser


def main():
    ruta = "svg-ficheros-3-1-1.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 1-1. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(4):
            for j in range(11):
                print(f'    <circle cx="{30 * j}" cy="{30 * i}" r="5" fill="black" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

La imagen que queremos obtener se puede interpretar como cuatro filas formadas por once puntos.

SVG Ficheros (3) 1 1 a

Para generarla se pueden utilizar bucles anidados.

        for i in range(4):
            for j in range(11):
                ...

El bucle externo (cuya variable de control es i) corresponde a las filas y por eso se ejecuta cuatro veces.
El bucle interno (cuya variable de control es j) corresponde a los puntos de cada fila y por eso se ejecuta once veces.

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Ficheros (3) 1 1 b

Las coordenadas X (0, 30, 60, 90, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j

j:     0    1    2    3    4    5    6    7    8    9   10     Fórmula
X:     0   30   60   90  120  150  180  210  240  270  300 --> 30*j

Las coordenadas Y (0, 30, 60, 90) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3     Fórmula
Y:     0   30   60   90 --> 30*i
```

El bucle anidado podría ser:

        for i in range(4):
            for j in range(11):
                print(f'      <circle cx="{30 * j}" cy="{30 * i}" r="5" fill="black" />',
                      file=fichero)

Gráficos SVG Ficheros (3) - 1 - Figura 2

import webbrowser


def main():
    ruta = "svg-ficheros-3-1-2.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 1-2. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(9):
            for j in range(6):
                print(f'    <circle cx="{60 * j}" cy="{30 * i}" r="5" fill="black" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

La imagen que queremos obtener se puede interpretar como nueve filas formadas por seis puntos.

SVG Ficheros (3) 1 2 a

Para generarla se pueden utilizar bucles anidados.

        for i in range(9):
            for j in range(6):
                ...

El bucle externo (cuya variable de control es i) corresponde a las filas y por eso se ejecuta nueve veces.
El bucle interno (cuya variable de control es j) corresponde a los puntos de cada fila y por eso se ejecuta seis veces.

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Ficheros (3) 1 2 b

Las coordenadas X (0, 60, 120, 180, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4    5     Fórmula
X:     0   60  120  180  240  300 --> 60*j
```
Las coordenadas Y (0, 30, 60, 90, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4    5    6    7    8      Fórmula
Y:     0   30   60   90   120  150  180  210  240 --> 30*i
```

El bucle anidado podría ser:

        for i in range(9):
            for j in range(6):
                print(f'      <circle cx="{60 * j}" cy="{30 * i}" r="5" fill="black" />',
                      file=fichero)

Gráficos SVG Ficheros (3) - 1 - Figura 3

import webbrowser


def main():
    ruta = "svg-ficheros-3-1-3.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 1-3. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(4):
            for j in range(8):
                print(f'    <circle cx="{60*j + 60}" cy="{60*i + 60}" r="60" '
                      'stroke="black" stroke-width="1" fill="none" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

La imagen que queremos obtener se puede interpretar como cuatro filas formadas por ocho círculos. Para dibujar los círculos, lo importante es conocer los centros de los círculos, que se indican en la imagen siguiente.

SVG Ficheros (3) 1 3 a

Para generarla se pueden utilizar bucles anidados.

        for i in range(4):
            for j in range(8):
                ...

El bucle externo (cuya variable de control es i) corresponde a las filas y por eso se ejecuta cuatro veces.
El bucle interno (cuya variable de control es j) corresponde a los puntos de cada fila y por eso se ejecuta ocho veces.

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Ficheros (3) 1 3 b

Las coordenadas X (60, 120, 180, 240, ...) de los centros de los círculos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4    5    6    7     Fórmula
X:    60  120  180  240  300  360  420  480 --> 60*j + 60
```
Las coordenadas Y (60, 120, 180, 240) de los centros de los círculos son las mismas para todos los círculos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3     Fórmula
Y:    60  120  180  240 --> 60*i + 60
```
El radio de todos los círculos es siempre el mismo, en concreto 60.

El bucle anidado podría ser:

        for i in range(4):
            for j in range(8):
                print(f'      <circle cx="{60*j + 60}" cy="{60*i + 60}" r="60" '
                      'stroke="black" stroke-width="1" fill="none" />', file=fichero)

Gráficos SVG Ficheros (3) - 1 - Figura 4

import webbrowser


def main():
    ruta = "svg-ficheros-3-1-4.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 1-4. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(4):
            for j in range(12):
                print(f'    <rect x="{40 * j}" y="{40 * i}" width="20" height="20" '
                      'stroke="black" stroke-width="1" fill="none" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

La imagen que queremos obtener se puede interpretar como cuatro filas formadas por doce cuadrados. Para dibujar los cuadrados, lo importante es conocer las esquinas superiores izquierda de los cuadrados, que se indican en la imagen siguiente.

SVG Ficheros (3) 1 4 a

Para generarla se pueden utilizar bucles anidados.

        for i in range(4):
            for j in range(12):
                ...

El bucle externo (cuya variable de control es i) corresponde a las filas y por eso se ejecuta cuatro veces.
El bucle interno (cuya variable de control es j) corresponde a los puntos de cada fila y por eso se ejecuta doce veces.

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Ficheros (3) 1 4 b

Las coordenadas X (0, 40, 80, 120, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j

j:     0    1    2    3    4    5    6    7     8    9   10   11     Fórmula
X:     0   40   80  120  160  200  240  280   320  360  400  440 --> 40*j

Las coordenadas Y (0, 40, 80, 120) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3     Fórmula
Y:     0   40   80  120 --> 40*i
```
El tamaño de los cuadrados es siempre el mismo, concretamente 20 de ancho y 20 de alto.

El bucle anidado podría ser:

        for i in range(4):
            for j in range(12):
                print(f'      <rect x="{40 * j}" y="{40 * i}" width="20" height="20" '
                      'stroke="black" stroke-width="1" fill="none" />', file=fichero)

Gráficos SVG Ficheros (3) - 1 - Figura 5

import webbrowser


def main():
    ruta = "svg-ficheros-3-1-5.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 1-5. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(4):
            for j in range(20):
                print(f'    <rect x="{30 * j}" y="{80 * i}" width="20" height="20" '
                      'stroke="black" stroke-width="1" fill="none" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

La imagen que queremos obtener se puede interpretar como cuatro filas formadas por veinte cuadrados. Para dibujar los cuadrados, lo importante es conocer las esquinas superiores izquierda de los cuadrados, que se indican en la imagen siguiente.

SVG Ficheros (3) 1 5 a

Para generarla se pueden utilizar bucles anidados.

        for i in range(4):
            for j in range(20):
                ...

El bucle externo (cuya variable de control es i) corresponde a las filas y por eso se ejecuta cuatro veces.
El bucle interno (cuya variable de control es j) corresponde a los puntos de cada fila y por eso se ejecuta veinte veces.

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Ficheros (3) 1 5 b

Las coordenadas X (0, 30, 60, 90, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   19     Fórmula
X:     0   30   60   90  120  ...  570 --> 30*j
```
El tamaño de los cuadrados es siempre el mismo, concretamente 20 de ancho y 20 de alto.
Las coordenadas Y (0, 40, 80, 120) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3     Fórmula
Y:     0   80  160  240 --> 80*i
```

El bucle anidado podría ser:

       for i in range(4):
            for j in range(20):
                print(f'      <rect x="{30 * j}" y="{80 * i}" width="20" height="20" '
                      'stroke="black" stroke-width="1" fill="none" />', file=fichero)

Gráficos SVG Ficheros (3) - 1 - Figura 6

import webbrowser


def main():
    ruta = "svg-ficheros-3-1-6.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 1-6. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(6):
            for j in range(12):
                print(f'    <rect x="{50 * j}" y="{50 * i}" width="46" height="46" '
                      'stroke="black" stroke-width="1" fill="none" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

La imagen que queremos obtener se puede interpretar como seis filas formadas por doce cuadrados. Para dibujar los cuadrados, lo importante es conocer las esquinas superiores izquierda de los cuadrados, que se indican en la imagen siguiente.

SVG Ficheros (3) 1 6 a

Para generarla se pueden utilizar bucles anidados.

        for i in range(6):
            for j in range(12):
                ...

El bucle externo (cuya variable de control es i) corresponde a las filas y por eso se ejecuta seis veces.
El bucle interno (cuya variable de control es j) corresponde a los puntos de cada fila y por eso se ejecuta doce veces.

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Ficheros (3) 1 6 b

Las coordenadas X (0, 50, 100, 150, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   19     Fórmula
X:     0   50  100  150  200  ...  550 --> 50*j
```
Las coordenadas Y (0, 50, 100, 150, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4    5     Fórmula
Y:     0   50  100  150  200  250 --> 50*i
```
El tamaño de los cuadrados es siempre el mismo, concretamente 46 de ancho y 46 de alto.

El bucle anidado podría ser:

        for i in range(6):
            for j in range(12):
                print(f'      <rect x="{50 * j}" y="{50 * i}" width="46" height="46" '
                      'stroke="black" stroke-width="1" fill="none" />', file=fichero)

Gráficos SVG Ficheros (3) - 2

Gráficos SVG Ficheros (3) - 2 - Figura 1

import webbrowser


def main():
    ruta = "svg-ficheros-3-2-1.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 2-1. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(5):
            for j in range(10):
                print(f'    <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

La imagen que queremos obtener se puede interpretar como cinco filas formadas por diez cruces.

SVG Ficheros (3) 2 1 a

Para generarla se pueden utilizar bucles anidados.

        for i in range(5):
            for j in range(10):
                ...

El bucle externo (cuya variable de control es i) corresponde a las filas y por eso se ejecuta cinco veces.
El bucle interno (cuya variable de control es j) corresponde a las cruces de cada fila y por eso se ejecuta diez veces.

Para dibujar las cruces, habrá que dibujar dos segmentos en cada iteración. Para cada segmento, habrá que conocer sus vértices, que se indican en la imagen siguiente.

SVG Ficheros (3) 2 1 b

Ahora hay que relacionar los valores de i y j con las coordenadas de cada uno de los puntos.

En horizontal, el dibujo ocupa 600 unidades. Como hay diez cruces en cada fila, cada cruz ocupa 60 unidades. El espacio entre cruces es la mitad del ancho de la cruz, por lo que el ancho es 40 y el espacio 20.
En vertical, el dibujo ocupa 300 unidades. Como hay cinco filas, cada fila ocupa 60 unidades. El espacio entre filas es la mitad del alto de la cruz, por lo que el alto es 40 y el espacio 20.

SVG Ficheros (3) 2 1 c

Extremo superior izquierda (puntos rojos en el dibujo anterior)
- Las coordenadas X (0, 60, 120, 180, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   9     Fórmula
X:     0   60  120  180  240  ...  540 --> 60*j
```
- Las coordenadas Y (0, 60, 120, 180, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4     Fórmula
Y:     0   60  120  180  240 --> 60*i
```
Extremo inferior derecha (puntos azules en el dibujo anterior)
- Las coordenadas X (40, 100, 160, 220, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   9     Fórmula
X:    40  100  160  220  280  ... 580 --> 60*j+40
```
- Las coordenadas Y (40, 100, 160, 220, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4     Fórmula
Y:     40 100  160  220  280 --> 60*i+40
```
Extremo superior derecha (puntos verdes en el dibujo anterior)
- Las coordenadas X (40, 100, 160, 220, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   9     Fórmula
X:    40  100  160  220  280  ... 580 --> 60*j+40
```
- Las coordenadas Y (0, 60, 120, 180, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4     Fórmula
Y:     0   60  120  180  240 --> 60*i
```
Extremo inferior izquierda (puntos amarillos en el dibujo anterior)
- Las coordenadas X (0, 60, 120, 180, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   9     Fórmula
X:     0   60  120  180  240  ...  540 --> 60*j
```
- Las coordenadas Y (40, 100, 160, 220, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4     Fórmula
Y:     40 100  160  220  280 --> 60*i+40
```

Finalmente, el bucle anidado podría ser:

        for i in range(5):
            for j in range(10):
                print(f'      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

Cada uno de los parámetros del dibujo interviene en el bucle:

El número de filas del dibujo (5)
```
        for i in range(5):
```
El número de cruces por fila (10)
```
            for j in range(10):
```

La separación entre cruces (60, tanto en horizontal como en vertical)

                print(f'      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

El tamaño de las cruces (40, tanto en horizontal como en vertical)

                print(f'      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

Gráficos SVG Ficheros (3) - 2 - Figura 2

import webbrowser


def main():
    ruta = "svg-ficheros-3-2-2.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 2-2. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(15):
            for j in range(30):
                print(f'    <line x1="{20 * j}" y1="{20 * i}" x2="{20*j + 15}" '
                      f'y2="{20*i + 15}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{20*j + 15}" y1="{20 * i}" x2="{20 * j}" '
                      f'y2="{20*i + 15}" stroke="black" stroke-width="1" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Este ejercicio es muy similar al anterior. La diferencia con respecto al anterior es que las cruces son más pequeñas y hay más cruces.

Si el código del ejercicio anterior era:

        for i in range(5):
            for j in range(10):
                print(f'      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

Habría que cambiar:

El número de filas del dibujo, de 5 a 10
```
        for i in range(5):
```
El número de cruces por fila, de 10 a 30
```
            for j in range(10):
```

La separación entre cruces, de 60 a 20, tanto en horizontal como en vertical

                print(f      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

El tamaño de las cruces, de 40 a 15, tanto en horizontal como en vertical

                print(f'      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

Con lo que el bucle anidado quedaría:

        for i in range(15):
            for j in range(30):
                print(f'      <line x1="{20 * j}" y1="{20 * i}" x2="{20*j + 15}" '
                      f'y2="{20*i + 15}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{20*j + 15}" y1="{20 * i}" x2="{20 * j}" '
                      f'y2="{20*i + 15}" stroke="black" stroke-width="1" />',
                      file=fichero)

Gráficos SVG Ficheros (3) - 2 - Figura 3

import webbrowser


def main():
    ruta = "svg-ficheros-3-2-3.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 2-3. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(7):
            for j in range(15):
                print(f'    <line x1="{40 * j}" y1="{40 * i}" x2="{40*j + 40}" '
                      f'y2="{40*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{40*j + 40}" y1="{40 * i}" x2="{40 * j}" '
                      f'y2="{40*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Este ejercicio vuelve a ser muy similar a los anteriores, aunque a primera vista pueda no parecerlo. La diferencia con respecto al anterior es que las cruces son más grandes y no hay espacio entre ellas.

SVG Ficheros (3) 2 3 a

Si el ancho del dibujo son 600 unidades y hay quince cruces por fila, cada cruz tiene un ancho de 40. Como las cruces son cuadradas, la altura de cada fila es también 40.

Si el código del primer ejercicio era:

        for i in range(5):
            for j in range(10):
                print(f'      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

Habría que cambiar:

El número de filas del dibujo, de 5 a 7
```
        for i in range(5):
```
El número de cruces por fila, de 10 a 15
```
            for j in range(10):
```

La separación entre cruces, de 60 a 40, tanto en horizontal como en vertical

                print(f'      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

El tamaño de las cruces sigue siendo de 40, tanto en horizontal como en vertical

                print(f'      <line x1="{60 * j}" y1="{60 * i}" x2="{60*j + 40}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{60*j + 40}" y1="{60 * i}" x2="{60 * j}" '
                      f'y2="{60*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

Con lo que el bucle anidado quedaría:

        for i in range(7):
            for j in range(15):
                print(f'      <line x1="{40 * j}" y1="{40 * i}" x2="{40*j + 40}" '
                      f'y2="{40*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{40*j + 40}" y1="{40 * i}" x2="{40 * j}" '
                      f'y2="{40*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)

Gráficos SVG Ficheros (3) - 2 - Figura 4

import webbrowser


def main():
    ruta = "svg-ficheros-3-2-4.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 2-4. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(6):
            for j in range(8):
                print(f'    <line x1="{40*j + 20}" y1="{40 * i}" x2="{40*j + 20}" '
                      f'y2="{40*i + 20}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{40*j + 10}" y1="{40*i + 10}" x2="{40*j + 30}" '
                      f'y2="{40*i + 10}" stroke="black" stroke-width="1" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

La imagen que queremos obtener se puede interpretar como seis filas formadas por ocho cruces.

SVG Ficheros (3) 2 4 a

Para generarla se pueden utilizar bucles anidados.

        for i in range(6):
            for j in range(8):
                ...

El bucle externo (cuya variable de control es i) corresponde a las filas y por eso se ejecuta seis veces.
El bucle interno (cuya variable de control es j) corresponde a las cruces de cada fila y por eso se ejecuta ocho veces.

Para dibujar las cruces, habrá que dibujar dos segmentos en cada iteración. Para cada segmento, habrá que conocer sus vértices, que se indican en la imagen siguiente.

SVG Ficheros (3) 2 4 b

Ahora hay que relacionar los valores de i y j con las coordenadas de cada uno de los puntos.

En horizontal, el dibujo ocupa un poco más de la mitad del espacio disponible, 600 unidades. Como hay ocho cruces en cada fila, cada cruz ocupa 40 unidades ( 300 / 8 = 37,5; 40 x 8 = 320).
Cada cruz está situada en la parte superior central del cuadrado de 40 unidades de lado, como muestra la imagen siguiente:

Así, los valores de las coordenadas de los puntos serían:

SVG Ficheros (3) 2 4 c

Vértice superior (puntos rojos en el dibujo anterior)
- Las coordenadas X (20, 60, 100, 140, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   7     Fórmula
X:    20   60  100  140  180  ...  300 --> 40*j+20
```
- Las coordenadas Y (0, 40, 80, 120, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4    5     Fórmula
Y:     0   40   80  120  160  200 --> 40*i
```
Vértice inferior (puntos azules en el dibujo anterior)
- Las coordenadas X (20, 60, 100, 140, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   7     Fórmula
X:    20   60  100  140  180  ...  300 --> 40*j+20
```
- Las coordenadas Y (20, 60, 100, 140, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4    5     Fórmula
Y:    20   60  120  160  200  240 --> 40*i+20
```
Vértice izquierdo (puntos verdes en el dibujo anterior)
- Las coordenadas X (10, 50, 90, 130, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   7     Fórmula
X:    10   50   90  130  170  ... 290 --> 40*j+10
```
- Las coordenadas Y (10, 50, 90, 130, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4     Fórmula
Y:    10   50   90  130  170 --> 40*i+10
```
Vértice derecho (puntos amarillos en el dibujo anterior)
- Las coordenadas X (30, 70, 110, 150, ...) de los puntos son las mismas para cada fila, es decir que la fórmula sólo depende de j
```
j:     0    1    2    3    4  ...   7     Fórmula
X:    30   70  110  150  190  ... 310 --> 40*j+30
```
- Las coordenadas Y (10, 50, 90, 130, ...) de los puntos son las mismas para todos los puntos de una fila, es decir que la fórmula sólo depende de i
```
i:     0    1    2    3    4     Fórmula
Y:    10   50   90  130  170 --> 40*i+10
```

Finalmente, el bucle anidado podría ser:

        for i in range(6):
            for j in range(8):
                print(f'      <line x1="{40*j + 20}" y1="{40 * i}" x2="{40*j + 20}" '
                      f'y2="{40*i + 20}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'      <line x1="{40*j + 10}" y1="{40*i + 10}" x2="{40*j + 30}" '
                      f'y2="{40*i + 10}" stroke="black" stroke-width="1" />',
                      file=fichero)

Gráficos SVG Ficheros (3) - 2 - Figura 5

import webbrowser


def main():
    ruta = "svg-ficheros-3-2-5.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 2-5. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(6):
            for j in range(11):
                print(f'    <line x1="{50*j + 10}" y1="{50 * i}" x2="{50*j + 50}" '
                      f'y2="{50*i + 10}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{50*j + 50}" y1="{50*i + 10}" x2="{50*j + 40}" '
                      f'y2="{50*i + 50}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{50*j + 40}" y1="{50*i + 50}" x2="{50 * j}" '
                      f'y2="{50*i + 40}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{50 * j}" y1="{50*i + 40}" x2="{50*j + 10}" '
                      f'y2="{50 * i}" stroke="black" stroke-width="1" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Gráficos SVG Ficheros (3) - 2 - Figura 6

import webbrowser


def main():
    ruta = "svg-ficheros-3-2-6.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 2-6. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(4):
            for j in range(9):
                print(f'    <line x1="{60*j + 30}" y1="{60 * i}" x2="{60*j + 30}" '
                      f'y2="{60*i + 15}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{60*j + 30}" y1="{60*i + 45}" x2="{60*j + 30}" '
                      f'y2="{60*i + 60}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{60 * j}" y1="{60*i + 30}" x2="{60*j + 15}" '
                      f'y2="{60*i + 30}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{60*j + 45}" y1="{60*i + 30}" x2="{60*j + 60}" '
                      f'y2="{60*i + 30}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{60*j + 30}" y1="{60*i + 15}" x2="{60*j + 45}" '
                      f'y2="{60*i + 30}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{60*j + 45}" y1="{60*i + 30}" x2="{60*j + 30}" '
                      f'y2="{60*i + 45}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{60*j + 30}" y1="{60*i + 45}" x2="{60*j + 15}" '
                      f'y2="{60*i + 30}" stroke="black" stroke-width="1" />',
                      file=fichero)
                print(f'    <line x1="{60*j + 15}" y1="{60*i + 30}" x2="{60*j + 30}" '
                      f'y2="{60*i + 15}" stroke="black" stroke-width="1" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Gráficos SVG Ficheros (3) - 3

Gráficos SVG Ficheros (3) - 3 - Figura 1

import webbrowser


def main():
    ruta = "svg-ficheros-3-3-1.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 3-1. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(6):
            for j in range(6):
                print(f'    <line x1="{120 * j}" y1="0" x2="{120 * i}" y2="300" '
                      'stroke="black" stroke-width="1" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Gráficos SVG Ficheros (3) - 3 - Figura 2

import webbrowser


def main():
    ruta = "svg-ficheros-3-3-2.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 3-2. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(11):
            for j in range(11):
                print(f'    <line x1="{60 * j}" y1="0" x2="{60 * i}" y2="300" '
                      'stroke="black" stroke-width="1" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Gráficos SVG Ficheros (3) - 3 - Figura 3

import webbrowser


def main():
    ruta = "svg-ficheros-3-3-3.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 3-3. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(6):
            for j in range(12):
                print(f'    <circle cx="{50 * j}" cy="{50 * i}" r="5" fill="black" />',
                      file=fichero)
                print(f'    <circle cx="{50*j + 25}" cy="{50*i + 25}" r="5" '
                      'fill="red" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Gráficos SVG Ficheros (3) - 3 - Figura 4

import webbrowser


def main():
    ruta = "svg-ficheros-3-3-4.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 3-4. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(6):
            for j in range(12):
                print(f'    <circle cx="{50 * j}" cy="{50 * i}" r="5" fill="black" />',
                      file=fichero)
        for i in range(5):
            for j in range(11):
                print(f'    <circle cx="{50*j + 25}" cy="{50*i + 25}" r="5" '
                      'fill="red" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Gráficos SVG Ficheros (3) - 3 - Figura 5

import webbrowser


def main():
    ruta = "svg-ficheros-3-3-5.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 3-5. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(7):
            for j in range(13):
                print(f'    <circle cx="{50 * j}" cy="{50 * i}" r="5" fill="black" />',
                      file=fichero)
        for i in range(6):
            for j in range(12):
                print(f'    <circle cx="{50*j + 25}" cy="{50*i + 25}" r="5" '
                      'fill="black" />', file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Gráficos SVG Ficheros (3) - 3 - Figura 6

import webbrowser


def main():
    ruta = "svg-ficheros-3-3-6.html"

    with open(ruta, mode="w", encoding="utf-8") as fichero:
        print("<!DOCTYPE html>", file=fichero)
        print('<html lang="es">', file=fichero)
        print("<head>", file=fichero)
        print('  <meta charset="utf-8">', file=fichero)
        print("  <title>Ficheros (3) 3-6. SVG. Ejercicios. Python</title>", file=fichero)
        print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
              file=fichero)
        print("</head>", file=fichero)
        print("", file=fichero)
        print("<body>", file=fichero)
        print('  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"', file=fichero)
        print('    width="620" height="320" viewBox="-10 -10 620 320"', file=fichero)
        print('    style="border: black 1px solid">', file=fichero)
        for i in range(5):
            for j in range(10):
                print(f'    <rect x="{60 * j}" y="{60 * i}" width="40" '
                      'height="40" stroke="black" stroke-width="1" fill="none" />',
                      file=fichero)
        for i in range(4):
            for j in range(9):
                print(f'    <rect x="{60*j + 30}" y="{60*i + 30}" width="40" '
                      'height="40" stroke="black" stroke-width="1" fill="none" />',
                      file=fichero)
        print("  </svg>", file=fichero)
        print("</body>", file=fichero)
        print("</html>", file=fichero)

    webbrowser.open(ruta)


if __name__ == "__main__":
    main()

Gráficos SVG - Ficheros - Soluciones (3): Bucles anidados

Gráficos SVG Ficheros (3) - 1

Gráficos SVG Ficheros (3) - 1 - Figura 1

Gráficos SVG Ficheros (3) - 1 - Figura 2

Gráficos SVG Ficheros (3) - 1 - Figura 3

Gráficos SVG Ficheros (3) - 1 - Figura 4

Gráficos SVG Ficheros (3) - 1 - Figura 5

Gráficos SVG Ficheros (3) - 1 - Figura 6

Gráficos SVG Ficheros (3) - 2

Gráficos SVG Ficheros (3) - 2 - Figura 1

Gráficos SVG Ficheros (3) - 2 - Figura 2

Gráficos SVG Ficheros (3) - 2 - Figura 3

Gráficos SVG Ficheros (3) - 2 - Figura 4

Gráficos SVG Ficheros (3) - 2 - Figura 5

Gráficos SVG Ficheros (3) - 2 - Figura 6

Gráficos SVG Ficheros (3) - 3

Gráficos SVG Ficheros (3) - 3 - Figura 1

Gráficos SVG Ficheros (3) - 3 - Figura 2

Gráficos SVG Ficheros (3) - 3 - Figura 3

Gráficos SVG Ficheros (3) - 3 - Figura 4

Gráficos SVG Ficheros (3) - 3 - Figura 5

Gráficos SVG Ficheros (3) - 3 - Figura 6