How to make the footer not take up half of the page? - reactjs

Question

So I have this svg as the footer and when I check in the developer tools it shows that it is taking up half of the page. I want the svg to only contain in the expected space without taking up extra space in the page since other elements cannot be positioned due to this issue.
<footer className='absolute bottom-0 w-full'>
<svg
className='fill-green'
viewBox='0 0 500 150'
preserveAspectRatio='none'
xmlns='http://www.w3.org/2000/svg'
>
<defs>
<filter id='shadow'>
<feDropShadow
dx='0'
dy='0'
stdDeviation='2'
flood-color='#159F68'
/>
</filter>
<path
id='footer-shadow'
className='stroke-none'
d='M29.86,179.11 C100.86,200.36 200.94,60.48 450.84,180.09 L363.96,855.44 L0.00,190.00 Z'
></path>
</defs>
<g>
<use href='#footer-shadow' filter='url(#shadow)'></use>
<text
className='fill-modern-green text-sm'
x='52%'
y='95%'
dominant-baseline='middle'
text-anchor='middle'
>
All rights reserved.
</text>
</g>
</svg>
</footer>

Answer 1

You can define width and height through the styles attribute for footer and svg. For example:
{/* Height of footer is 30px */}
<footer className='absolute bottom-0 w-full' style={{width: '100%', height: '30px'}}>
{/* SVG Height based on the footer height */}
<svg
style={{width: '100%', height: '100%'}}
className='fill-green'
viewBox='0 0 500 150'
preserveAspectRatio='none'
xmlns='http://www.w3.org/2000/svg'
>
<defs>
<filter id='shadow'>
<feDropShadow
dx='0'
dy='0'
stdDeviation='2'
flood-color='#159F68'
/>
</filter>
<path
id='footer-shadow'
className='stroke-none'
d='M29.86,179.11 C100.86,200.36 200.94,60.48 450.84,180.09 L363.96,855.44 L0.00,190.00 Z'
></path>
</defs>
<g>
<use href='#footer-shadow' filter='url(#shadow)'></use>
<text
className='fill-modern-green text-sm'
x='52%'
y='95%'
dominant-baseline='middle'
text-anchor='middle'
>
All rights reserved.
</text>
</g>
</svg>
</footer>