Importància de SVG en la robòtica

SVG signifíca gràfic vectorial escalable, es a dir que ho veig com un gràfic o imatge però no està feta de píxxels sino d'una fórmula matemàtica que es representa amb un codi tal com explica la pàgina del professor

SVG és un format que puc feer tant gran com vulgui i no es pixelarà perquè és una fórmula matemàtica

He de generar un SVG per un circuit de fórmula 1, concretament els circuits que veus a continuació

Circuit de Belgica.

Circuit de Hungría.

En el seguent link es podra comprovar les corbes de Bezier amb els cicuits de F1 (Belgica i Hungria)

El seguent cicuit és un exemple que conté moltes corbes Bezier creades amb el programa inkscape o altres eines de dibuix vectorial. Primer mostrem el circuit en el qual es veu una bola movent-se i a continuació expliquem el seu codi


    <!DOCTYPE html<
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Circuit de Fórmula 1</title>
</head>
<body>
    <svg width="820" height="296">
        <!-- Carril del circuit de Fórmula 1 -->


     <path id="circuit" stroke="black" fill="transparent" stroke-width="10" d="
 
  M 286.31 54.19
  Q 271.43 39.48 250.95 40.66
  C 187.45 44.30 121.13 30.00 60.85 57.74
  C 22.49 75.40 -2.89 126.76 17.95 165.82
  Q 29.93 188.26 53.20 198.60
  C 68.74 205.51 86.81 210.65 101.87 219.91
  C 114.63 227.76 112.88 243.23 113.30 257.54
  C 113.74 272.20 131.07 288.70 145.31 288.64
  Q 441.07 287.37 736.81 289.96
  C 748.65 290.06 757.89 289.51 768.43 287.43
  Q 770.01 287.12 772.08 285.83
  C 780.11 280.84 788.20 277.16 793.37 270.98
  C 812.79 247.81 810.52 216.85 809.28 188.71
  C 808.65 174.49 798.10 172.67 786.70 170.47
  A 2.78 2.77 6.2 0 1 784.46 167.69
  C 784.93 145.69 790.73 123.86 788.26 101.84
  C 787.66 96.49 785.37 90.95 780.47 89.05
  C 753.42 78.54 725.31 70.06 697.49 61.08
  Q 689.17 58.39 684.23 58.21
  C 661.47 57.34 639.58 76.88 640.68 100.22
  C 642.10 130.10 662.32 137.39 686.26 145.62
  Q 688.91 146.53 689.73 148.54
  Q 698.88 170.75 710.30 203.00
  C 711.05 205.11 710.39 206.40 708.85 207.76
  Q 708.48 208.08 708.06 207.83
  C 628.02 160.50 551.81 114.33 473.57 67.86
  Q 461.42 60.64 455.92 58.52
  C 432.66 49.53 403.79 54.22 387.11 73.63
  Q 386.54 74.29 375.37 89.83
  Q 349.28 126.10 325.01 163.62
  Q 318.67 173.41 317.43 176.17
  C 311.96 188.36 315.01 201.67 312.87 214.47
  C 312.16 218.72 308.92 224.52 304.00 224.68
  C 266.50 225.87 222.76 229.59 190.81 209.20
  Q 166.24 193.53 120.60 161.91
  C 118.94 160.76 116.80 158.71 116.51 157.00
  C 115.45 150.77 119.71 142.86 126.98 142.72
  C 159.52 142.08 192.05 142.28 224.60 142.24
  Q 237.43 142.23 244.19 140.85
  C 269.31 135.75 292.01 119.12 297.61 93.15
  C 300.93 77.78 297.38 65.12 286.31 54.19
"/>
        <!-- Bola groga que circula pel circuit -->
        <circle id="bola" r="10" fill="yellow">
            <animateMotion dur="20s" repeatCount="indefinite">
                <mpath xlink:href="#circuit" />
            </animateMotion>
        </circle>
    </svg>
</body>
</html>