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!

enter image description here

<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  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>

CodePudding user response：

The solution for superimposing two elements should be quite simple, just adding the two elements inside the same SVG in the proper order.

Since you are using viewBox, the centering can be achieved with a transform attribute applied to polygon, like this: transform: translate(-100px, 380px); (feel free to tweak the coordinates since it is centered by heart). This way, the resizing will not affected the polygon and it will always be centered.

The final code look like this:

<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 style="transform: translate(-100px, 380px);"  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>

    <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>

CodePudding user response：

The rect needs to use the values of the viewBox (viewBox ="100 -600 2000 2500")

<rect style="fill: url(#g);" x="100" y="-600" width="2000" height="2500"/>

In order to make it cover the whole window I'm using width="100vw" height="100vh" Also I use preserveAspectRatio="xMidYMid slice" This is preserving the aspect ratio and the entire viewport is covered by the viewBox.

xMidYMid - Force uniform scaling. Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport. Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport.

Slice - Since the aspect ratio of the viewBox does not allways match the viewport, some of the viewBox will extend beyond the bounds of the viewport. Whar I mean by this is that part of the rectangle will fall outside the svg canvas and will be sliced off.

Please read about the preserveAspectRatio attribute.

body{margin:0; padding:0;}

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="100vw"
    height="100vh"
    viewBox="100 -600 2000 2500"
    preserveAspectRatio="xMidYMid slice"
>
    <defs>  
        <filter id="blur">
            <feGaussianBlur stdDeviation="7" />
        </filter>
    </defs>
    <g id="logo" fill="#e5cd98" filter="url(#blur)">
        <polygon   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>

    <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);" 
          x="100" y="-600" width="2000" height="2500"/>

</svg>