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 té la ventatja de que el pots fer tant gran com vulgui , i mai es pixelarà perquè és una fòrmula matemàtica.
Amb SVG construirem un circuit de fòrmula 1, concretament en el meu cas:
El circuit d'Austràlia:
El circuit d'Azerbaijan:
El seguent circuit és un exemple que conté moltes corbes de bezier creades amb l'eina Inkscape oaltres 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>