title: How can I use a Javascript variable to define the width of an SVG element?
body: <p>I wanted a red square in the middle of my (landscape-format) screen. But now the side length of the square appears to be the screen width anyway. How do I set it to the variable square_side?</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;!DOCTYPE html&gt;
          &lt;html lang="en"&gt;
          &lt;body&gt;
          &lt;script&gt;
          const square_side = Math.min(screen.availWidth, screen.availHeight);
          &lt;/script&gt;
          &lt;div style=" display: flex; justify-content: center; align-items: center;"&gt;
          &lt;svg width=square_side viewBox="0 0 100 100"&gt;
          &lt;polygon fill=red
          points="0,0 0,100 100,100 100,0" /&gt;
      
          &lt;/svg&gt;
          &lt;/div&gt;
          &lt;/body&gt;
          &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>