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.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="100%" height="100%" viewBox="0 0 270 50"
preserveAspectRatio="xMaxYMax meet">
<path d="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"
stroke="none" fill="blue"/>
<text text-anchor="middle" x="50%" y="35" font-size="30" fill="white"
font-family="Montserrat">Login</text>
</svg>
When I finish these images, I use rsvg-convert to create the necessary size images I need for an iOS application. So to generate the 1x, 2x, and 3x sizes I run
rsvg-convert -w 500 login.svg > login-1x.png
rsvg-convert -w 1000 login.svg > login-2x.png
rsvg-convert -w 1500 login.svg > login-3x.png
I have been led to believe that setting preserveAspectRatio="xMaxYMax meet" should cause my viewBox to scale up to the size of my viewport. However when I implement this I get the following results.
login-1x.png
login-2x.png
login-3x.png
You can see there is no scaling go on at all. In fact if I add
<rect width="100%" height="100%" x="0" y="0" fill="none" stroke="white"/>
To see an outline of a 100% by 100% rectangle, I get this.
100% by 100% outline
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. What am I doing wrong?