I utilized an online tool to generate custom SVG CSS at this link:
Upon implementing it on my webpage, the rendering seems correct in terms of height and width. However, upon inspecting the page, I noticed that the SVG file dimensions are 1512px by 1512px, which is significantly larger than intended. How can I ensure that it only occupies the necessary space?
svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index:-1;
}
.wave-container {
padding-top:50px;
display: inline-block;
position: relative;
width: 100%;
vertical-align: middle;
}<div class="wave-container">
<svg viewBox="0 0 500 500" preserveAspectRatio="none">
<path d="M 0 0 H 563 V 32 C 222 114 168 -4 1 1" style="stroke: none; fill:#003349;"></path>
</svg>
</div>My attempt was to utilize CSS to depict the SVG as a wave background. While it appears visually appealing, it occupies excessive hidden space due to being treated as a .svg element.
I experimented with setting a maximum height of 500px, but this resulted in distorting the SVG file and shrinking it significantly in both width and height.
In the online tool, the values were set as "Absolute," perhaps leading to the disparity observed.