Backboard shapes: Why Are "Fill" Attributes Important for Your SVG Files?

Use “fill” attributes in the SVG files you add to the customiser. Do not use “stroke” attributes. This guide explains why. It also shows what happens to icons and custom backboard shapes when an SVG file uses strokes, and how to correct the file.

What Are “Fill” and “Stroke” Attributes?

Fill: Makes the area inside a shape solid.
Stroke: Draws a line along the outline of a shape. A stroke does not fill the inside. The inside stays empty when Fill is set to none.

Why Does This Matter?

Use fill attributes in icons and in custom backboard shapes. The result for a stroke-based SVG file depends on where you use it:

Icons: When you add an icon that has a viewBox attribute, the app tries to convert a stroke-based SVG file to fill. For more about icons, see Icons in Sign Designs.
Custom backboard shapes: The app does not convert strokes. It draws every painted area of your SVG file, so a stroke shows as a thin line of material. Before you upload the file, convert all strokes to fills in your vector editor.

What Happens When an Icon Conversion Fails?

The icon converter cannot process every SVG file. If the converter cannot process an icon file, it returns the file unchanged. The admin does not show a warning about this. The app then builds the icon font from every icon. If the font cannot be built from that file, the save fails and the app does not keep the icon.

The converter also skips an icon file whose root svg element has no viewBox attribute and does not have both width and height attributes. The admin removes the width and height attributes of the root svg element when you add a file. So the app does not convert an icon that you add without a viewBox attribute.

Check each new icon after you add it. If an icon has strokes, convert them to fills in your vector editor. Then upload the file again.

What Happens When a Backboard Shape Has Strokes?

The app does not correct a backboard shape. The admin shows a warning. The customiser draws the shape as you uploaded it.

In the customiser preview, the app uses only the shape of your SVG file. The colours in the file do not change the preview. A shape made of strokes has filled area only along its thin lines. The backboard material shows only along those lines.

A shape with fill="none" and no stroke has no area. This shape does not show.

How to Check Your SVGs

Open your SVG file in a vector editor. Look at how the editor defines the shapes. Below is an example of a tree made with a stroke.

A tree drawn with a stroke only: Fill is none and Stroke is black.

Here is an example of a tree made with a fill.

A tree drawn with a fill only: Fill is black and Stroke is none.

For a backboard shape, the admin also checks the file when you upload it. See the next section.

Custom Backboard Shapes

A custom backboard shape gets its colour or material from the Backboard Colours & Materials settings of the backboard (called Plate Colours & Materials on Braille signs). In the customiser preview, the app uses only the shape of your SVG file. The colours in the SVG file do not change the preview.

Make sure that your SVG file:

Uses fill attributes. Do not use strokes.
Contains solid-filled shapes. Do not use hollow shapes.
Is 512 KiB (524,288 bytes) or smaller. The app refuses a larger file. To make a file smaller, simplify the paths and remove unused elements in your vector editor.

The examples below show the difference between a hollow shape and a solid shape.

A hollow shape with a black outline, an arrow, and the same shape with the backboard material only on the outline.

A hollow shape with a fill attribute fills only its outline.

A solid black shape, an arrow, and the same shape with the backboard material over the whole shape.

A solid shape with a fill attribute fills the whole shape.

Upload a Custom Shape

In the Sign Customiser admin, click Customisers. Select your customiser.
In the menu, go to Sign Components > Backboards.
Click Add Backboard. On Braille, Metal Cut-Out and Stencil signs, click Add Plate, Add Panel or Add Sheet.
Enter a Label.
In the Visualisation section, select Custom Shape. Skip this step on Metal Cut-Out and Stencil signs.
Click Add file. Select your SVG file.
To start with a ready-made shape, click Choose from our library.

On some sign types, the Backboards item has a different name. Braille signs show Plates. Metal Cut-Out signs show Panels. Stencil signs show Sheets. Lightbox signs do not have this item.

Metal Cut-Out and Stencil signs do not have a Custom Shape option. On these signs, select Cut-out Panel or Cut-out Sheet in the Panel Visualisation or Sheet Visualisation section. Then upload the shape in the Panel Shape or Sheet Shape section.

The Custom Shape panel looks like this:

The Custom Shape panel on the New Backboard page, with the Add file button and the Choose from our library button.

The Shape Library shows ready-made shapes:

The Shape Library window with ready-made shapes such as a flower, a circle and a triangle.

After the shape shows in the panel:

Adjust the padding. The sign text must stay inside the shape.
Click Save.

Read the Shape Warnings

After you upload a file, the admin checks it. If the admin finds a problem, a Backboard Shape Warning shows above the shape preview. Each line gives the number of elements that have the problem. The admin can warn you about:

Elements with a stroke but no fill.
Shape elements with no fill attribute and no stroke attribute.
Strokes in style attributes.
Elements with fill="none" and no stroke. These elements are invisible on the backboard.

The Backboard Shape Warning banner listing the elements with a stroke but no fill, above the shape preview.

To correct the problem:

Click Remove Shape.
Correct the SVG file in your vector editor. Use the steps below.
Upload the corrected file.

A warning does not stop you from saving. If you save the shape without a correction, the customiser draws it as you uploaded it.

For more about backboard types, see Backboards.

How to Convert Strokes to Fills in Vector Editors

Vector editors such as Adobe Illustrator and Affinity Designer can convert strokes to fills.

Adobe Illustrator

Open your SVG file in Illustrator.
Select the shapes with strokes.
Go to the Object menu > Expand. In the dialog box, make sure “Stroke” is selected, and confirm. Illustrator expands the stroke into its own object.
Save your updated file as an SVG. Go to File > Export > Export As. Select SVG as the format.

Affinity Designer

Open your SVG file in Affinity Designer.
Use the Move Tool (V) to click a vector object with a stroke. Affinity Designer cannot expand pixel brush strokes.
Go to the Layer menu > Expand Stroke. Affinity Designer turns the stroke into curves that form a closed shape.
Save your file. Go to File > Export. Choose the SVG format.