title: Why is SVG preserveAspectRatio not working? rsvg-convert
body: <p>I am using SVG graphics to create images for an app I'm working on. As an example I will use one of my simplest images.</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
  &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;
  &lt;svg version=&quot;1.1&quot; width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 270 50&quot; 
      preserveAspectRatio=&quot;xMaxYMax meet&quot;&gt;
      &lt;path d=&quot;M 25 0 l 220 0 a 25 25 0 0 1 0 50 l -220 0 a 25 25 0 0 1 0 -50&quot;
          stroke=&quot;none&quot; fill=&quot;blue&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;50%&quot; y=&quot;35&quot; font-size=&quot;30&quot; fill=&quot;white&quot;
          font-family=&quot;Montserrat&quot;&gt;Login&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>When I finish these images, I use <code>rsvg-convert</code> to create the necessary size images I need for an iOS application. So to generate the 1x, 2x, and 3x sizes I run</p>
  <pre><code>rsvg-convert -w 500 login.svg &gt; login-1x.png
  rsvg-convert -w 1000 login.svg &gt; login-2x.png
  rsvg-convert -w 1500 login.svg &gt; login-3x.png
  </code></pre>
  <p>I have been led to believe that setting <code>preserveAspectRatio=&quot;xMaxYMax meet&quot;</code> should cause my <code>viewBox</code> to scale up to the size of my viewport. However when I implement this I get the following results.</p>
  <h2>login-1x.png</h2>
  <p><a href="https://i.stack.imgur.com/1W2x2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1W2x2.png" alt="login-1x.png" /></a></p>
  <h2>login-2x.png</h2>
  <p><a href="https://i.stack.imgur.com/TuERb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TuERb.png" alt="login-2x.png" /></a></p>
  <h2>login-3x.png</h2>
  <p><a href="https://i.stack.imgur.com/8y2uP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8y2uP.png" alt="login-3x.png" /></a></p>
  <p>You can see there is no scaling go on at all. In fact if I add</p>
  <pre><code>&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; x=&quot;0&quot; y=&quot;0&quot; fill=&quot;none&quot; stroke=&quot;white&quot;/&gt;
  </code></pre>
  <p>To see an outline of a 100% by 100% rectangle, I get this.</p>
  <h2>100% by 100% outline</h2>
  <p><a href="https://i.stack.imgur.com/KYIrD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KYIrD.png" alt="white outline showing" /></a></p>
  <p>So it's obvious to me that for some reason rsvg-convert is somehow interpreting 100% to be 100% of the viewBox and not the viewport. <em>What am I doing wrong?</em></p>