Importància de SVG en la robótica

SVG: Gràfic Vectorial Escalable es a dir que ho veig com a un gràfic escalable però, no està feta de píxels sino d'uno fórmula matemàtica que es representa amb un codi tal com explica La pàgina del professor.

SVG té l'avantatge és un format que el puc fer tan gran com vulgui i mai es pixelarà perquè es una fórmula matemàtica.

Amb SVG he de generar un SVG per un circuit de Fórmula 1, concretament els circuits que veus a continuació:

Circuit d'Australia, Mellburme

Circuit de Azerbaiyán, Baku

El següent circuit és un exmeple que conté moltes corbes Reziern creades amb el programa Inscape o altre eines de dibuix vectorial. Primer mostres



<!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>