Problem with custom svg section dividers

1

Hi - This may not be a bricks issue, probably an issue with the SVG itself but I hope someone can help as I’m driving myself crazy here!

I’m trying to upload a curved SVG as a shape divider (By the way though, why is it that I can add weird paint drips out of the box but not a simple, very common curved shape? but anyway…)

The SVG I’ve uploaded doesn’t have space above and below it (as you can see if you look at the path in the chrome inspector) but the SVG itself is a square making space above and below the path itself

The support from the design program said I should remove the viewbox but if I do that the shape isn’t scaleable, even if I add preserveAspectRatio=“none” to the SVG tag

Can you let me know what I should add/remove from the svg to make it work as a shape divider?

https://test.vikmartin.co.uk/

2 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="50%" viewBox="0 0 3310 473" version="1.1" style="fill: #ffffff"><g transform="matrix(1,0,0,1,2.30171,-2.98319)"><path d="M1,3C389.774,347.874 709.297,475.76 1655,473C2598.45,470.246 2919.71,346.429 3307,6L3307,473C3307,473 1.197,478.545 -1,474C-3.197,469.455 -2.666,-0.252 1,3Z"></path></g></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none">
              <path fill="currentColor" fill-opacity="1" d="M1,3C389.774,347.874 709.297,475.76 1655,473C2598.45,470.246 2919.71,346.429 3307,6L3307,473C3307,473 1.197,478.545 -1,474C-3.197,469.455 -2.666,-0.252 1,3Z"></path>
            </svg>

In the first - you need preserveAspectRatio=“none”,
You don’t need a group or the
<g transform="matrix(1,0,0,1,2.30171,-2.98319)">
Fill should be currentColor so it takes it’s color from the container.
You don’t need width and height set.

The second one may work - but you need to export the SVG as ‘web ready’. I use Illustrator - so can’t tell you how this works with Affinity - but it’s something like export->minimised.

3

Thanks so much! It was the width and height that was the problem there.