title: Responsive SVG viewBox
body: <p>I made a "hamburger button" in SVG, as seen below.</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-css lang-css prettyprint-override"><code>body {
    margin: 0;
    text-align: center;
  }
  
  svg#ham-btn {
    margin: 2rem;
    border: 1px solid black;
    fill: #383838;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;style&gt;
      #ham-btn {
        cursor: pointer;
      }
      #ham-btn:hover #r1 {
        outline: 1px solid transparent;
        transition: transform 0.2s;
        transform-origin: 50% 50%;
        transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
      }
      #ham-btn:hover #r2 {
        transition: transform 0.2s;
        transform: translate(120%, 0);
      }
      #ham-btn:hover #r3 {
        outline: 1px solid transparent;
        transition: transform 0.2s;
        transform-origin: 50% 50%;
        transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
      }
      
    &lt;/style&gt;
    &lt;rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" /&gt;
    &lt;rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/&gt;
    &lt;rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Question</strong></p>
  
  <p>Right now, if I want to make the button smaller, I have to manually make the dimensions of the viewport and <code>viewBox</code> smaller by the same amount of px.</p>
  
  <p>Is there any way to make that more responsive? For instance, by making <code>viewBox</code> be a percentage of the viewport?</p>
  
  <p><a href="https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute" rel="nofollow noreferrer">According to the spec</a>, it seems <code>viewBox</code> has to be a <code>&lt;number&gt;</code>, and thus cannot be a percentage.</p>
  
  <p>Any thoughts?</p>
  
  <p>Thank you.</p>
  
  <hr>
  
  <p><strong>Note 1</strong></p>
  
  <p>I have not added any accessibility or other features to the button. This question is about its responsiveness.</p>
  
  <hr>
  
  <p><strong>Note 2</strong></p>
  
  <p>I know I can make the SVG viewport a percentage of its container / the browser viewport.</p>
  
  <p>That does not solve my issue unfortunately, as to make this button work my viewBox-to-viewport ratio must stay fixed (otherwise the button looses its shape).</p>
  
  <p>Thus, I wanted to make the <code>viewBox</code> be a percentage of the viewport.</p>
  
  <p>In case it is of interest, my solution takes advantage of the following:</p>
  
  <ul>
  <li><code>viewBox</code> is wider than viewport, but has the same height</li>
  <li>Thus, <code>preserveAspectRatio</code> is used to horizontally center the <code>rect</code>s</li>
  <li><code>rect</code> dimensions are in percentage of <code>viewBox</code></li>
  </ul>
  
  <p>The <code>outline</code> is to fix a Firefox issue with jagged lines after transform.</p>
  
  <hr>
  
  <p><strong>Edit:</strong></p>
  
  <p>In case helpful to future visitors, the final button, including full accessibility, can be found here: <a href="https://codepen.io/magnusriga/pen/KrrJKa" rel="nofollow noreferrer">https://codepen.io/magnusriga/pen/KrrJKa</a></p>