Why Are "Fill" Attributes Important for Your SVG Files?

When using SVGs in our customiser, ensuring they are composed of "fill" attributes rather than "stroke" attributes is crucial. This guide explains why this matters, how it affects the appearance of your icons and custom backboards, and what you can do to resolve potential issues.

What Are "Fill" and "Stroke" Attributes?

Fill: Define the area inside a shape, making it solid.
Stroke: Outline the shape without filling it in, making it appear hollow or thin.

Why Does This Matter?

Our app relies on fill attributes to render SVGs properly so that they show the correct material effects and colors in your custom sign visualizer. If your SVG is composed of stroke commands, the app will attempt to convert it to fill automatically.

What Happens When Conversion Fails?

While most stroke-to-fill conversions are seamless, complex SVGs may experience:

Missing or distorted parts: Thin lines may disappear or look uneven.
Unintended design changes: Overlapping or complex shapes may look different.

How to Check Your SVGs

Open your SVG in a vector editor and inspect the SVG structure. Look at how the shapes are defined. Below is an example of a tree made using stroke.

Here is an example of a tree made using fill.

Custom Backboard Shapes

When creating custom backboard shapes with SVGs, ensure the design uses both fill attributes and consists of solid-filled shapes. This ensures the backboard material image is applied across the entire shape.

The examples below highlight the difference between a hollow-filled shape and a solid-filled shape.

A hollow-filled shape with a fill attribute will result in only the outer edges being filled.

A solid-filled shape with a fill attribute will result in the entire shape being filled.

How to Convert Strokes to Fills in Vector Editors

Most vector editors (e.g., Adobe Illustrator, Affinity) allow you to convert strokes to fills.

Adobe Illustrator

Open your SVG file in Illustrator
Use the Selection Tool (V) to click on the shapes with strokes.
Go to the Object menu > Expand. In the dialog box, ensure "Stroke" is selected and click OK. Your stroke is now converted into a filled shape.
Save your updated file as an SVG using File > Export > Export As, ensuring "Use Artboards" is selected.

Affinity Designer

Open your SVG file in Affinity Designer
Use the Move Tool (V) to click on any object with a stroke.
Go to the Layer menu > Expand Stroke. Your stroke is now converted into a filled shape.
Save your file by going to File > Export. Choose the SVG format.