SVG for background image using CSS

password: lfc2023

I am trying to use an SVG for the background image of the top main section of the homepage. Right now, you will see thin green curved lines on the right-hand side - a .png image placeholder to show what I want. I would like for it to be an SVG so it remains crisp. This is the code I propose using, but it does not work (I delete the .png file when I try to implement the code)

section[data-section-id="6524201cf483616e06792526"].section-background {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3236.25' height='1367.35' viewBox='0 0 3236.25 1367.35'><path stroke='#5e683d' stroke-miterlimit='10' fill='none' d='M1892.69.08s-105.14,997.13-932.69,1366.81'/><path stroke='#5e683d' stroke-miterlimit='10' fill='none' d='M2482.83.08s-108.53,827.55-586.74,1366.81'/><path stroke='#5e683d' stroke-miterlimit='10' fill='none' d='M2883.03.08s-135.66,827.55-613.88,1366.81'/><path stroke='#5e683d' stroke-miterlimit='10' fill='none' d='M3235.76,777.88s-58.46,356.62-264.54,589.01'/><rect y='1.43' width='3235.76' height='1365.46' fill='none'/></svg>");
    background-position: center;
    background-size: auto;
}

Thanks in advance!

there is another post that looks like it's been pretty much solved for a few different scenarios. 
 

Hi, that code does work for their svg image - but not for mine. I followed the same steps.

Can you share a link?

Sure: https://ocelot-trumpet-4j83.squarespace.com/

password: lfc2023

This is my code:

section[data-section-id="6524201cf483616e06792526"] .section-background {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2276.49 1642.45"><defs><style>.cls-1{fill:#5e683d;stroke-width:0px;}</style></defs><g id="Layer_2-2"><path class="cls-1" d="m.47,1642.45l-.47-.88c188.69-101.26,355.12-250.56,494.68-443.75,111.65-154.57,206.45-337.41,281.76-543.47,67-183.33,105.85-351.48,126.64-460.25C925.59,76.24,932.36.77,932.42.02l1,.09c-.07.75-6.83,76.25-29.37,194.15-20.79,108.81-59.65,277.01-126.68,460.41-75.34,206.14-170.18,389.08-281.88,543.72C355.85,1391.71,189.3,1541.11.47,1642.45Z"/><path class="cls-1" d="m936.72,1642.3l-.8-.59c109.05-147.73,207.75-325.96,293.36-529.74,68.49-163.03,128.8-342.69,179.25-533.98C1494.44,252.29,1522.29,2.5,1522.56.01l.99.11c-.27,2.49-28.13,252.34-114.06,578.11-50.47,191.34-110.79,371.04-179.3,534.12-85.64,203.86-184.38,382.16-293.48,529.95Z"/><path class="cls-1" d="m1309.79,1642.3l-.8-.59c109.05-147.73,209.18-325.96,297.6-529.74,70.74-163.03,134.19-342.69,188.58-533.98C1887.79,252.28,1922.43,2.49,1922.77,0l.99.14c-.34,2.49-34.99,252.33-127.62,578.11-54.41,191.34-117.87,371.04-188.63,534.11-88.45,203.85-188.62,382.15-297.72,529.95Z"/><path class="cls-1" d="m2011.85,1642.3l-.8-.59c46.98-63.64,90.12-140.43,128.21-228.23,30.48-70.24,57.82-147.65,81.25-230.07,39.91-140.34,54.83-247.98,54.98-249.05l.99.13c-.15,1.07-15.08,108.76-55.01,249.17-23.45,82.47-50.8,159.92-81.3,230.21-38.13,87.87-81.3,164.72-128.33,228.43Z"/></g></svg>');
  background-position: center;
  background-size: cover; /* Adjust to your preference */
  background-attachment: scroll;
  background-repeat: no-repeat;
}
 

I attached an image of what the SVG looks like - these four lines are supposed to be on the right hand side, behind the leaf.