What is the best method to create svg for shape divider?

How To
1

I need to make a custom shape divider and I’m using Affinity Designer.
It has many options for exporting the svg like “for export”, “small size”, “high quality”, and “flattened” etc. None of them work.

In the exported SVG code, the fill color is inside the element(s). This fill is not getting overwritten by the fill color when used in Bricks. If I manually edit the SVG code and remove the fill style from the path(s), it will work, but this is bad because then my SVG (preview) is all white or transparent and I can’t see anything.

I’m sure there must be some kind of proper format to use for an SVG so that the Bricks fill will work. For that matter, not just shape dividers but I want to know the best way to create SVGs for use period so they can be styled using normal controls.

I’m trying to get to a place where I can just make svg files in Affinity and export them and they will work without having to edit the code or fuss with it manually before it’s usable.

Here is an example I drew which is just a circle and then exported from Affinity.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1.07373,0,0,1.07373,-18.874,-8.92225)">
        <circle cx="256" cy="246.732" r="238.422" style="fill:rgb(231,177,177);"/>
    </g>
</svg>

You can see it puts the fill inside the element (or the path element etc) for each kind of shape. But Bricks puts the fill style on the top level tag. This doesn’t overwrite the fills that are in the various paths.

I must be missing something. Is there some special way to design SVGs and color them (so we can at least see what we’re drawing and have a thumbnail preview) but still allow fill color on the element to override the fill on the inner paths? Or must I have a large collection of SVGs that are essentially transparent just so Bricks can color them?

2

Not sure if this method would work for a shape divider, but it does work with CSS styling such as fill, etc. Please note these export settings are specifically for Adobe Illustrator but Affinity should have something similar.

3

I don’t think Affinity has the “presentation” setting. So if I set a stroke or fill, it will output that as inline styles whether I like it or not.

It seems that Bricks expects our SVGs to not have inline styles and just inherit the fill from the wrapping <svg> tag.

I feel like this could use some work. Like maybe there is a tool or method to sanitize and prep the SVGs during the upload into the media library.

But then again, some SVGs that are complex like multiple paths with multiple colors, this won’t apply since we don’t want one single fill coloring everything if it’s a multi-layer SVG.

So I don’t know what the best way is. I guess I just have to edit all my single color SVGs manually before uploading. Bleh!