How to add custom icons and tracks to your sports race visualization

Our Sports race template allows you to visualize races and competitions along fixed distances. Although especially introduced for the 2020 Tokyo Olympics, this template can be used for any sports race. 

In this help doc, you'll learn how to add your own participant icons and how to upload a custom SVG track for them to race on.

How to add custom participant icons

1

Under the Track & Participants settings, find the Participants section and select  Custom for your Default image.

2

This will prompt three new settings that need to be filled with an image file each:

• Custom start image: sets the icon at the start of the race
• Custom racing image: sets the icon that will appear during the race
• Custom finish image: sets the icon at the end of the race

Click on the arrow and select a file from your computer. The editor supports PNG and SVG files. You can also upload a GIF to create animated participants. 

If you want the same images throughout your race, just upload the same image to each setting.

TIP: You can color your icons so that each participant has a distinctive hue by toggling the Recolour icons option.

How to add your own custom track

1

First, you need to have an SVG file with the track you want to upload. You can create one using software like Adobe Illustrator or free alternatives like Method Draw or Figma. 

When creating it, make sure that your SVG has a path (the pink line highlighted below) that traces the route the athletes are going to follow on the visualization (more about this later).

2

Under the Track & Participants settings, for the Track setting, select the Custom option. A white box should appear where you will paste your custom SVG.

3

There are multiple ways to copy your SVG code, but we'll teach you three ways of doing this:

• Using Figma: open your SVG in Figma, make sure you have all the elements selected and click Copy/Paste > Copy as SVG. Finally, paste this code on the Flourish editor.
  

  

• Using a code editor: open your SVG file in the code editor of your choice (we are using VS Code). Then, select and copy all the code and paste it on the Flourish editor.
  

  

• Using the developer tools on your browser: you can view your SVG code by opening the file on a browser (by double clicking or dragging it to the browser window). Then, you can do right-click > Inspect > Elements > Right-click on the svg tag > Copy > Copy element and paste that on the Flourish editor.
  

  

The pasted code should look something like this:

4

Once you've pasted your SVG code into the editor, you'll need to check for a couple of things. First, make sure that the code includes both width and height attributes. They are usually found in the first couple of lines of the code. If you don't see these attributes, you'll need to set them manually. Without them, the SVG won't show on the page.

TIP: If you don't see the width and height attributes, look for viewBox instead. If you find that, replace it with the regular width and height values, like so: width="800" height="600"

5

Within the code, find the path you've created on your SVG for your athletes to follow and copy its ID into the Path ID field. If the path doesn't have an ID, you can create one by adding it to the path tag on the code, like so: id="your-id". Flourish will automatically style this path to be invisible on the final visualization.

6

There are a couple of last settings to take a look at. You can edit the distance between the athletes on the track using the Lane width setting: the higher the number, the further apart the icons will be.

Finally, choose the Track type: the left icon represents a track that repeats itself, like an athletics track, while the right icon is for a track that goes back and forth, like a swimming pool.