title: Superimposing two svg elements
body: <p>I want to create a svg that fills the browser window size and that contains 2 elements:</p>
  <ul>
  <li>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.</li>
  <li>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.</li>
  </ul>
  <p>How can I merge the two svg elements into one to obtain what I want? Thanks!</p>
  <p><a href="https://i.stack.imgur.com/Ga03A.png" rel="nofollow noreferrer">example of expected final result </a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
      height="100%"
      viewBox="100 -600 2000 2500"
  &gt;
      &lt;defs&gt;  
          &lt;filter id="blur"&gt;
              &lt;feGaussianBlur stdDeviation="7" /&gt;
          &lt;/filter&gt;
      &lt;/defs&gt;
      &lt;g id="logo" fill="#e5cd98" filter="url(#blur)"&gt;
          &lt;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"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg
      xmlns="http://www.w3.org/2000/svg"
  &gt;
      &lt;defs&gt;
          &lt;linearGradient id="g" x1="0%" x2="100%" y1="0%" y2="100%"&gt;
              &lt;stop style="stop-color: #754C24;" offset="0" stop-opacity="0.8"/&gt;
              &lt;stop style="stop-color: #C7B299;" offset="1" stop-opacity="0.9"/&gt;
          &lt;/linearGradient&gt;
      &lt;/defs&gt;
      &lt;rect style="fill: url(#g);" width="100%" height="100%"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>