Skip to content

julesr0y/f1-circuits-svg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

F1 CIRCUITS SVG 🏎️

This repository contains the layouts and their evolutions of all the circuits that have hosted at least one world championship Grand Prix in Formula 1 history.
⚠️ Evolutions only concern the layout of circuits, not the pitlane evolutions, track resurfacing, track enlargement etc...
💽 All layouts are in SVG format.

PitLane Insider uses this repository to display circuit layouts.

🛣️ Included circuits :

78 circuits : • Adelaide Street Circuit (Adelaide)
• Ain-Diab Circuit (Casablanca)
• Aintree Motor Racing Circuit (Aintree)
• Algarve International Circuit (Portimão)
• Anderstorp Raceway (Anderstorp)
• Autodromo Internazionale Enzo e Dino Ferrari (Imola)
• Autodromo Internazionale del Mugello (Scarperia e San Piero)
• Autodromo Nazionale Monza (Monza)
• Autódromo Hermanos Rodríguez (Mexico City)
• Autódromo Internacional Nelson Piquet (Rio de Janeiro)
• Autódromo José Carlos Pace (São Paulo)
• Autódromo Juan y Oscar Gálvez (Buenos Aires)
• Autódromo do Estoril (Estoril)
• Automobil-Verkehrs- und Übungs-Straße (Berlin)
• Bahrain International Circuit (Sakhir)
• Baku City Circuit (Baku)
• Brands Hatch (Fawkham)
• Buddh International Circuit (Greater Noida)
• Bugatti Circuit (Le Mans)
• Caesars Palace (Las Vegas)
• Canadian Tire Motorsport Park (Bowmanville)
• Charade Circuit (Clermont-Ferrand)
• Circuit Bremgarten (Bern)
• Circuit Gilles Villeneuve (Montreal)
• Circuit Mont-Tremblant (Mont-Tremblant)
• Circuit Park Zandvoort (Zandvoort)
• Circuit Paul Ricard (Le Castellet)
• Circuit Zolder (Heusden-Zolder)
• Circuit de Barcelona-Catalunya (Montmeló)
• Circuit de Monaco (Monte Carlo)
• Circuit de Nevers Magny-Cours (Nevers)
• Circuit de Spa-Francorchamps (Spa)
• Circuit of the Americas (Austin)
• Circuito da Boavista (Porto)
• Circuito de Jerez (Jerez de la Frontera)
• Circuito de Madring (Madrid)
• Circuito de Monsanto (Lisbon)
• Circuito de Montjuïc (Barcelona)
• Circuito del Jarama (Madrid)
• Detroit Street Circuit (Detroit)
• Dijon-Prenois (Dijon)
• Donington Park (Leicestershire)
• Fair Park (Dallas)
• Fuji Speedway (Oyama)
• Hockenheimring (Hockenheim)
• Hungaroring (Budapest)
• Indianapolis Motor Speedway (Indianapolis)
• Istanbul Park (Istanbul)
• Jeddah Corniche Circuit (Jeddah)
• Korea International Circuit (Yeongam)
• Kyalami Racing Circuit (Midrand)
• Las Vegas Street Circuit (Las Vegas)
• Long Beach (Long Beach)
• Losail International Circuit (Lusail)
• Marina Bay Street Circuit (Singapore)
• Melbourne Grand Prix Circuit (Melbourne)
• Miami International Autodrome (Miami Gardens)
• Nivelles-Baulers (Nivelles)
• Nürburgring (Nürburg)
• Okayama International Circuit (Aida)
• Pedralbes Circuit (Barcelona)
• Pescara Circuit (Pescara)
• Phoenix Street Circuit (Phoenix)
• Prince George Circuit (East London)
• Red Bull Ring (Spielberg)
• Reims-Gueux (Reims)
• Riverside International Raceway (Riverside)
• Rouen-Les-Essarts (Rouen)
• Sebring International Raceway (Sebring)
• Sepang International Circuit (Sepang)
• Shanghai International Circuit (Shanghai)
• Silverstone Circuit (Silverstone)
• Sochi Autodrom (Sochi)
• Suzuka Circuit (Suzuka)
• Valencia Street Circuit (Valencia)
• Watkins Glen International (Watkins Glen)
• Yas Marina Circuit (Abu Dhabi)
• Zeltweg (Zeltweg)

🎨 Style :

You can find 4 styles of layouts in this repository (backgrounds are normally transparent, but here they are black or white for better visibility) :

Minimal style : only the track layout, without any details

  • Black :

    Kyalami
  • Black outline :

    Spa
  • White :

    Estoril
  • White outline :

    Monza

Detailed style : the track layout with more details (starting line, track direction) - only for 2026 layouts for now, but I will add more in the future

  • Example with the white outline style :

    Catalunya

📁 Structure :

root folder contains :

  • circuits.json file containing all circuits data (id, name, length, layouts...)
     About layouts key in circuits.json file :
     • each layout has his circuit id, followed by -number (ex: monza-1 is the first ever used layout, monza-2 the second...)
     • each layout has the seasons when it was used (ex: "1958,1960-1962" indicates that the layout was used in 1958, 1960, 1961 and 1962)

  • circuits folder contains :

    • minimal folder containing all circuits layouts with a minimal style
    • detailed folder containing all circuits layouts with more details (track direction, starting line)

     There are 4 styles in all of the folders above (black, black-outline, white, white-outline)

🖌️ Customisation :

By default, stroke width is set to 20px for outline, and 5px for inside outline. You can easily customize these files for your own use by modifying stroke and stroke-width values in the style attribute :

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="500" height="500">
  <path d="M461.087 263.524 197.304 38.836c-4.69-3.995..." style="fill:none;stroke:#000;stroke-width:20;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"/>
</svg>

If needed, you can also customise width and height (default 500px x 500px) by modifying width and height attributes.

💽 Formatting files :

All SVG files are optimized with SVGO, with a custom configuration svgo.config.mjs to avoid removing important attributes (viewBox, xmlns) and to keep the content of "d" attribute as compact as possible (without newlines or unnecessary spaces).

Here is an example of using it with the terminal :

npm install
cd circuits
npx svgo -f . -r

🔎 Sources :

________ _______ __  __       _________        ______            
___  __ \__  __ \_ \/ /       ______  /____  _____  /_____ ________
__  /_/ /_  / / /__  /        ___ _  / _  / / /__  / _  _ \__  ___/
_  _, _/ / /_/ / _  /         / /_/ /  / /_/ / _  /  /  __/_(__  ) 
/_/ |_|  \____/  /_/          \____/   \__,_/  /_/   \___/ /____/