I want to create a svg that fills the browser window size and that contains 2 elements:
- The first element is a vector logo that must stay in the center of the window (H and V) whatever the size of the window.
- The second element, which comes on top of the first, is a rectangle with color gradient and transparency that must fill the entire window whatever the size of the window.
How can I merge the two svg elements into one to obtain what I want? Thanks!
example of expected final result
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="100 -600 2000 2500"
>
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="7" />
</filter>
</defs>
<g id="logo" fill="#e5cd98" filter="url(#blur)">
<polygon class="cls-1" points="514.86 528.38 850.86 280.38 898.86 432.38 1238.86 372.38 1720.86 528.38 1734.86 788.38 1390.86 752.38 1232.86 906.38 1048.86 936.38 934.86 606.38 588.86 676.38 514.86 528.38"/>
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id="g" x1="0%" x2="100%" y1="0%" y2="100%">
<stop style="stop-color: #754C24;" offset="0" stop-opacity="0.8"/>
<stop style="stop-color: #C7B299;" offset="1" stop-opacity="0.9"/>
</linearGradient>
</defs>
<rect style="fill: url(#g);" width="100%" height="100%"/>
</svg>