Sharp library doesn’t capture the padding area when creating a file output

I want to use the Sharp library to output a line graph SVG to a png. In the SVG the axis and legends are on top of the padding space of the SVG as overflow, shown in this picture.

When I use Sharp to process the SVG into an image file, the padding part is not captured as in output png shown in this picture.

const element = renderToString(svg);
sharp(Buffer.from(element))
.png()
.toFile("output.png", Object);

JSFiddle of line graph: https://jsfiddle.net/Lefsqo3j/14/

<svg overflow="visible" style="padding:24px 0px 24px 40px">
  {/*Grid lines*/}
        <svg role="img" viewBox="0 0 300 100" preserveAspectRatio="none">
            <svg viewBox="0 0 300 100" preserveAspectRatio="none">
                <line y1="0" y2="100" x1="0" x2="0" stroke-width="0.2" stroke="black"></line>
                <line y1="0" y2="100" x1="75" x2="75" stroke-width="0.2" stroke="black"></line>
                <line y1="0" y2="100" x1="150" x2="150" stroke-width="0.2" stroke="black"></line>
                <line y1="0" y2="100" x1="225" x2="225" stroke-width="0.2" stroke="black"></line>
                <line y1="0" y2="100" x1="300" x2="300" stroke-width="0.2" stroke="black"></line>
                <line x1="0" x2="300" y1="0" y2="0" stroke-width="0.2" stroke="black"></line>
                <line x1="0" x2="300" y1="25" y2="25" stroke-width="0.2" stroke="black"></line>
                <line x1="0" x2="300" y1="50" y2="50" stroke-width="0.2" stroke="black"></line>
                <line x1="0" x2="300" y1="75" y2="75" stroke-width="0.2" stroke="black"></line>
                <line x1="0" x2="300" y1="100" y2="100" stroke-width="0.2" stroke="black"></line>
            </svg>
        </svg>
  {/*Legend*/}
        <svg x="100%" overflow="visible">
            <text text-anchor="end" dy="-8px">
                <tspan fill="red"> ⬤</tspan>
                Line A<tspan fill="blue"> ⬤</tspan>
                Line B
            </text>
        </svg>
  {/*Date lines*/}
        <svg viewBox="0 0 300 100" preserveAspectRatio="none">
            <path
                d="M 0 75 M 0 75  L 75 50 L 150 15 L 225 67 L 300 67 L 300 67"
                stroke-width="3"
                stroke="red"
                fill="transparent"
                vector-effect="non-scaling-stroke"
            ></path>
            <path
                d="M 0 92 M 0 92  L 75 72 L 150 80 L 225 50 L 300 50 L 300 50"
                stroke-width="3"
                stroke="blue"
                fill="transparent"
            ></path>
        </svg>
        <svg overflow="visible">
    {/*Y Axis*/}
            <text x="0%" text-anchor="end" y="0%">
                40
            </text>
            <text x="0%" text-anchor="end" y="25%">
                30
            </text>
            <text x="0%" text-anchor="end" y="50%">
                20
            </text>
            <text x="0%" text-anchor="end" y="75%">
                10
            </text>
            <text x="0%" text-anchor="end" y="100%">
                0
            </text>
    {/*X Axis*/}
            <g style="transform: translateX(0%);">
                <text y="100%" dy="16px">
                    5
                </text>
            </g>
            <g style="transform: translateX(25%);">
                <text y="100%" dy="16px">
                    10
                </text>
            </g>
            <g style="transform: translateX(50%); ">
                <text y="100%" dy="16px">
                    15
                </text>
            </g>
            <g style="transform: translateX(75%); ">
                <text y="100%" dy="16px">
                    20
                </text>
            </g>
            <g text-anchor="end" style="transform: translateX(100%);">
                <text y="100%" dy="16px">
                    25
                </text>
            </g>
        </svg>
    </svg>

Is there a way for the padding area with the axis and legend to be captured in the output png together with the graph?
Thank you.