SVG significa gràfic vectorial escalable es a dir que ho veig com un gràfic o imatge però no està feta de píxels sinó 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 fer tant gran com vulgui i no es pixelarà perquè és una fórmula matemàtica
He de generar un SVG per un circuit de F1 concretament els circuits que veus a continuacio
Circuit de Montmeló
Circuit de Canada
El següent circuit é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>