JSFiddle - React, Tailwind, and code Playground

HTML

<div class='parent'>Top
    <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
        <path d="M 5 30 C 0 125 0 220 31 500 l -8 -1 m 9 1 l 0 -8" id="dw-svg-c_dw-t-cmhjzn0hb4_dw-t-1gthmdxldr"></path>
    </svg>
     <p class='bottom'>Bottom</p>
</div>

<!--
If you zoom out, in Chrome, then you'll notice that the `<svg>` is truncated, higher and higher above the "Bottom", the more you zoom out.

-->

CSS

.parent {
    position: relative;
    height: 500px;
}

.bottom {
    position: absolute;
    bottom: 0px;
}

svg {
    /* It seems to me that if you zoom out to 50%,
    then half the <svg> is cropped. Indeed,
    if you specify height: 200%, the whole <svg>
    is shown, at 50% zoom. */
    height: 100%;
    position: absolute;
    /* doesn't help:  (even w/o position:absolute)
    float: left;
    display: block;  */
}