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?