Open Gingerbread by going to gingerbread.wntr.dev in your modern web browser. You'll see a screen like the one below.

There are three example designs you can look at to see how Gingerbread does its thing. You can also download the associated .afdesign files and look at how they were created in Affinity Designer 2.

Open your SVG

In your file application (Windows, for example, would be File Explorer), open up the directory containing your SVG file made with Affinity Designer 2. Drag the SVG file to the blank area below the existing examples.

If Gingerbread parses the SVG file as valid, you will have a screen similar to the one below. If it doesn't work, check the settings used to export an SVG graphics file from Affinity Designer 2 from the previous page.

You can toggle the layers on and off in the lower right. You can change the color of the solder mask and silk layers for better viewing.

Use the view to make sure all the layers are the way you want. You can separate the layers and view the back with the black buttons at the bottom of the frame.

As an example of the warning above, you can use any colors you wish in Gingerbread, but different board house fabricators have different processes, not the full range of colors.

In the OSH Park normal service, the Solder Mask color is purple and the silkscreen is white. 

Other PCB fabricators, such as JCLPCB and PCBWay, may have more flexible options. 

Search different manufacturers for the colors and processing you want.

Ready to Export to KiCad

If the design is looking like you want it, you then click the "Export to Clipboard" button in the lower right part of the window. This will load the clipboard with the data the KiCad Footprint Editor expects for a new footprint (part).