作業中のアプリの画像を作成するために SVG グラフィックを使用しています。例として、最も単純な画像の 1 つを使用します。
<?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>
これらの画像が完成したらrsvg-convert、iOS アプリケーションに必要なサイズの画像を作成します。したがって、実行する 1x、2x、および 3x サイズを生成するには
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
設定により、ビューポートのサイズに拡大するpreserveAspectRatio="xMaxYMax meet"必要があると信じるようになりました。viewBoxただし、これを実装すると、次の結果が得られます。
login-1x.png
login-2x.png
login-3x.png
スケーリングがまったく行われていないことがわかります。実際に追加すると
<rect width="100%" height="100%" x="0" y="0" fill="none" stroke="white"/>
100% x 100% の長方形の輪郭を表示するには、次のようにします。
100% x 100% アウトライン
したがって、何らかの理由で rsvg-convert が 100% をビューポートではなくビューボックスの 100% と解釈していることは明らかです。私は何を間違っていますか？