以下の内容はhttps://mntone.hateblo.jp/entry/2015/11/16/092223より取得しました。

<mini> SVG を自動で PNG に変換するマン ～Inkscape を使って～

mini Development Windows

※ 175%, 260%, 275%, 280% スケーリングは MakeAppX が受け付けないようです。

　WinRT apps であまりに多いスケーリングに対応するために作りました。

　WinRT apps は

  • UWP: (80%), 100%, 125%, (140%), 150%, 160%, 175%, (180%), 200%, (220%), (240%), 225%, 250%, 275%, 300%, 400%
  • Windows ストア アプリ: (80%), 100%, 140%, 180%
  • Windows Phone ストア アプリ: 100%, 120%, 140%, 160%, 180%, 200%, 220%, 240%

に対応する必要があるので、これらに対応した画像リソースを作らねばなりません。しかし、ハイコントラスト対応含め、このスケーリング画像を生成するとなると組み合わせがやばいぐらい…　そこで Inkscape と PowerShell を使って自動で生成するやつを作ります。

$inkscape = "C:\Program Files\Inkscape\inkscape.com"
$items = (Get-Content settings.json -Encoding UTF8 | ConvertFrom-Json)
foreach ($item in $items)
{
    for ($i = 0; $i -lt $item.size.length; ++$i)
    {
        $option = "-z"
        $width = "-w" + $item.size[$i][1]
        $export = "--export-png=" + ($item.output_filename -F $item.size[$i][0], $item.size[$i][1])
        & $inkscape $item.input_filename $option $width $export
    }
}

　設定は json から

[        
    {
        "input_filename": "SmallLogo.svg",
        "output_filename": "../Tile70x70.scale-{0}.png",
        "size": [
            [80, 56], [100, 70], [140, 98], [180, 126]
        ]
    },
    {
        "input_filename": "SmallLogo.svg",
        "output_filename": "../Tile70x70.scale-{0}_contrast-black.png",
        "size": [
            [80, 56], [100, 70], [140, 98], [180, 126]
        ]
    },
    {
        "input_filename": "SmallLogo_contrast-white.svg",
        "output_filename": "../Tile70x70.scale-{0}_contrast-white.png",
        "size": [
            [80, 56], [100, 70], [140, 98], [180, 126]
        ]
    },

    {
        "input_filename": "SmallLogo.svg",
        "output_filename": "../Tile71x71.scale-{0}.png",
        "size": [
            [80, 57], [100, 71], [125, 89], [140, 99], [150, 107], [160, 114], [175, 124],
            [180, 128], [200, 142], [220, 156], [225, 160], [240, 170], [250, 178], [260, 185],
            [280, 199], [300, 213], [400, 284]
        ]
    },
    {
        "input_filename": "SmallLogo.svg",
        "output_filename": "../Tile71x71.scale-{0}_contrast-black.png",
        "size": [
            [80, 57], [100, 71], [125, 89], [140, 99], [150, 107], [160, 114], [175, 124],
            [180, 128], [200, 142], [220, 156], [225, 160], [240, 170], [250, 178], [260, 185],
            [280, 199], [300, 213], [400, 284]
        ]
    },
    {
        "input_filename": "SmallLogo_contrast-white.svg",
        "output_filename": "../Tile71x71.scale-{0}_contrast-white.png",
        "size": [
            [80, 57], [100, 71], [125, 89], [140, 99], [150, 107], [160, 114], [175, 124],
            [180, 128], [200, 142], [220, 156], [225, 160], [240, 170], [250, 178], [260, 185],
            [280, 199], [300, 213], [400, 284]
        ]
    },

    {
        "input_filename": "SquareLogo.svg",
        "output_filename": "../Tile150x150.scale-{0}.png",
        "size": [
            [80, 120], [100, 150], [125, 188], [140, 210], [150, 225], [160, 240], [175, 263],
            [180, 270], [200, 300], [220, 330], [225, 338], [240, 360], [250, 375], [260, 490],
            [280, 420], [300, 450], [400, 600]
        ]
    },
    {
        "input_filename": "SquareLogo.svg",
        "output_filename": "../Tile150x150.scale-{0}_contrast-black.png",
        "size": [
            [80, 120], [100, 150], [125, 188], [140, 210], [150, 225], [160, 240], [175, 263],
            [180, 270], [200, 300], [220, 330], [225, 338], [240, 360], [250, 375], [260, 490],
            [280, 420], [300, 450], [400, 600]
        ]
    },
    {
        "input_filename": "SquareLogo_contrast-white.svg",
        "output_filename": "../Tile150x150.scale-{0}_contrast-white.png",
        "size": [
            [80, 120], [100, 150], [125, 188], [140, 210], [150, 225], [160, 240], [175, 263],
            [180, 270], [200, 300], [220, 330], [225, 338], [240, 360], [250, 375], [260, 490],
            [280, 420], [300, 450], [400, 600]
        ]
    },

    {
        "input_filename": "WideLogo.svg",
        "output_filename": "../Tile310x150.scale-{0}.png",
        "size": [
            [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543],
            [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806],
            [280, 868], [300, 930], [400, 1240]
        ]
    },
    {
        "input_filename": "WideLogo.svg",
        "output_filename": "../Tile310x150.scale-{0}_contrast-black.png",
        "size": [
            [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543],
            [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806],
            [280, 868], [300, 930], [400, 1240]
        ]
    },
    {
        "input_filename": "WideLogo_contrast-white.svg",
        "output_filename": "../Tile310x150.scale-{0}_contrast-white.png",
        "size": [
            [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543],
            [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806],
            [280, 868], [300, 930], [400, 1240]
        ]
    },

    {
        "input_filename": "SquareLogo.svg",
        "output_filename": "../Tile310x310.scale-{0}.png",
        "size": [
            [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543],
            [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806],
            [280, 868], [300, 930], [400, 1240]
        ]
    },
    {
        "input_filename": "SquareLogo.svg",
        "output_filename": "../Tile310x310.scale-{0}_contrast-black.png",
        "size": [
            [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543],
            [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806],
            [280, 868], [300, 930], [400, 1240]
        ]
    },
    {
        "input_filename": "SquareLogo_contrast-white.svg",
        "output_filename": "../Tile310x310.scale-{0}_contrast-white.png",
        "size": [
            [80, 248], [100, 310], [125, 388], [140, 434], [150, 465], [160, 496], [175, 543],
            [180, 558], [200, 620], [220, 682], [225, 698], [240, 744], [250, 775], [260, 806],
            [280, 868], [300, 930], [400, 1240]
        ]
    },

    {
        "input_filename": "AppList.svg",
        "output_filename": "../AppList30x30.scale-{0}.png",
        "size": [
            [80, 24], [100, 30], [140, 42], [180, 54]
        ]
    },
    {
        "input_filename": "AppList.svg",
        "output_filename": "../AppList30x30.targetsize-{0}.png",
        "size": [
            [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42],
            [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108],
            [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384],
            [448, 448], [512, 512], [576, 576], [640, 640]
        ]
    },
    {
        "input_filename": "AppList.svg",
        "output_filename": "../AppList30x30.scale-{0}_contrast-black.png",
        "size": [
            [80, 24], [100, 30], [140, 42], [180, 54]
        ]
    },
    {
        "input_filename": "AppList.svg",
        "output_filename": "../AppList30x30.targetsize-{0}_contrast-black.png",
        "size": [
            [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42],
            [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108],
            [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384],
            [448, 448], [512, 512], [576, 576], [640, 640]
        ]
    },
    {
        "input_filename": "AppList_contrast-white.svg",
        "output_filename": "../AppList30x30.scale-{0}_contrast-white.png",
        "size": [
            [80, 24], [100, 30], [140, 42], [180, 54]
        ]
    },
    {
        "input_filename": "AppList_contrast-white.svg",
        "output_filename": "../AppList30x30.targetsize-{0}_contrast-white.png",
        "size": [
            [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42],
            [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108],
            [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384],
            [448, 448], [512, 512], [576, 576], [640, 640]
        ]
    },

    {
        "input_filename": "AppList.svg",
        "output_filename": "../AppList44x44.scale-{0}.png",
        "size": [
            [80, 35], [100, 44], [125, 55], [140, 62], [150, 66], [160, 70], [175, 77],
            [180, 79], [200, 88], [220, 97], [225, 99], [240, 106], [250, 110], [260, 114],
            [280, 123], [300, 264], [400, 176]
        ]
    },
    {
        "input_filename": "AppList.svg",
        "output_filename": "../AppList44x44.targetsize-{0}.png",
        "size": [
            [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42],
            [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108],
            [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384],
            [448, 448], [512, 512], [576, 576], [640, 640]
        ]
    },
    {
        "input_filename": "AppList.svg",
        "output_filename": "../AppList44x44.scale-{0}_contrast-black.png",
        "size": [
            [80, 35], [100, 44], [125, 55], [140, 62], [150, 66], [160, 70], [175, 77],
            [180, 79], [200, 88], [220, 97], [225, 99], [240, 106], [250, 110], [260, 114],
            [280, 123], [300, 264], [400, 176]
        ]
    },
    {
        "input_filename": "AppList.svg",
        "output_filename": "../AppList44x44.targetsize-{0}_contrast-black.png",
        "size": [
            [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42],
            [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108],
            [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384],
            [448, 448], [512, 512], [576, 576], [640, 640]
        ]
    },
    {
        "input_filename": "AppList_contrast-white.svg",
        "output_filename": "../AppList44x44.scale-{0}_contrast-white.png",
        "size": [
            [80, 35], [100, 44], [125, 55], [140, 62], [150, 66], [160, 70], [175, 77],
            [180, 79], [200, 88], [220, 97], [225, 99], [240, 106], [250, 110], [260, 114],
            [280, 123], [300, 264], [400, 176]
        ]
    },
    {
        "input_filename": "AppList_contrast-white.svg",
        "output_filename": "../AppList44x44.targetsize-{0}_contrast-white.png",
        "size": [
            [16, 16], [20, 20], [24, 24], [28, 28], [30, 30], [32, 32], [36, 36], [40, 40], [42, 42],
            [48, 48], [54, 54], [60, 60], [64, 64], [72, 72], [80, 80], [84, 84], [96, 96], [108, 108],
            [112, 112], [120, 120], [128, 128], [144, 144], [256, 256], [320, 320], [384, 384],
            [448, 448], [512, 512], [576, 576], [640, 640]
        ]
    },

    {
        "input_filename": "AppList.svg",
        "output_filename": "../StoreLogo.scale-{0}.png",
        "size": [
            [100, 50], [125, 63], [140, 70], [150, 75], [160, 80], [175, 88],
            [180, 90], [200, 100], [220, 110], [225, 113], [240, 120], [250, 125], [260, 130],
            [280, 140], [300, 150], [400, 200]
        ]
    },
    {
        "input_filename": "AppList.svg",
        "output_filename": "../StoreLogo.scale-{0}_contrast-black.png",
        "size": [
            [100, 50], [125, 63], [140, 70], [150, 75], [160, 80], [175, 88],
            [180, 90], [200, 100], [220, 110], [225, 113], [240, 120], [250, 125], [260, 130],
            [280, 140], [300, 150], [400, 200]
        ]
    },
    {
        "input_filename": "AppList_contrast-white.svg",
        "output_filename": "../StoreLogo.scale-{0}_contrast-white.png",
        "size": [
            [100, 50], [125, 63], [140, 70], [150, 75], [160, 80], [175, 88],
            [180, 90], [200, 100], [220, 110], [225, 113], [240, 120], [250, 125], [260, 130],
            [280, 140], [300, 150], [400, 200]
        ]
    },

    {
        "input_filename": "AppList.svg",
        "output_filename": "../BadgeLogo.scale-{0}.png",
        "size": [
            [100, 24], [125, 30], [140, 33], [150, 36], [160, 38], [175, 42],
            [180, 43], [200, 48], [220, 53], [225, 54], [240, 58], [250, 60], [260, 62],
            [280, 67], [300, 72], [400, 96]
        ]
    },
    {
        "input_filename": "AppList.svg",
        "output_filename": "../BadgeLogo.scale-{0}_contrast-black.png",
        "size": [
            [100, 24], [125, 30], [140, 33], [150, 36], [160, 38], [175, 42],
            [180, 43], [200, 48], [220, 53], [225, 54], [240, 58], [250, 60], [260, 62],
            [280, 67], [300, 72], [400, 96]
        ]
    },
    {
        "input_filename": "AppList_contrast-white.svg",
        "output_filename": "../BadgeLogo.scale-{0}_contrast-white.png",
        "size": [
            [100, 24], [125, 30], [140, 33], [150, 36], [160, 38], [175, 42],
            [180, 43], [200, 48], [220, 53], [225, 54], [240, 58], [250, 60], [260, 62],
            [280, 67], [300, 72], [400, 96]
        ]
    },

    {
        "input_filename": "WideLogo.svg",
        "output_filename": "../SplashScreen.scale-{0}.png",
        "size": [
            [100, 620], [125, 775], [140, 868], [150, 930], [160, 992], [175, 1085],
            [180, 1116], [200, 1240], [220, 1364], [225, 1395], [240, 1488], [250, 1550], [260, 1612],
            [280, 1736], [300, 1860], [400, 2480]
        ]
    },
    {
        "input_filename": "WideLogo.svg",
        "output_filename": "../SplashScreen.scale-{0}_contrast-black.png",
        "size": [
            [100, 620], [125, 775], [140, 868], [150, 930], [160, 992], [175, 1085],
            [180, 1116], [200, 1240], [220, 1364], [225, 1395], [240, 1488], [250, 1550], [260, 1612],
            [280, 1736], [300, 1860], [400, 2480]
        ]
    },
    {
        "input_filename": "WideLogo_contrast-white.svg",
        "output_filename": "../SplashScreen.scale-{0}_contrast-white.png",
        "size": [
            [100, 620], [125, 775], [140, 868], [150, 930], [160, 992], [175, 1085],
            [180, 1116], [200, 1240], [220, 1364], [225, 1395], [240, 1488], [250, 1550], [260, 1612],
            [280, 1736], [300, 1860], [400, 2480]
        ]
    },

    {
        "input_filename": "SplashScreenPhone.svg",
        "output_filename": "../SplashScreenPhone.scale-{0}.png",
        "size": [
            [100, 480], [140, 672], [160, 768], [180, 864], [200, 960], [220, 1056], [240, 1152]
        ]
    },
    {
        "input_filename": "SplashScreenPhone.svg",
        "output_filename": "../SplashScreenPhone.scale-{0}_contrast-black.png",
        "size": [
            [100, 480], [140, 672], [160, 768], [180, 864], [200, 960], [220, 1056], [240, 1152]
        ]
    },
    {
        "input_filename": "SplashScreenPhone_contrast-white.svg",
        "output_filename": "../SplashScreenPhone.scale-{0}_contrast-white.png",
        "size": [
            [100, 480], [140, 672], [160, 768], [180, 864], [200, 960], [220, 1056], [240, 1152]
        ]
    }
]

　出力ファイル名には C# の string.Format のようなことができるようになっています。

　推奨以外のサイズもあるのでかなり多いです。むしろ推奨だけじゃ足りてないので、これぐらいは最低必要だと思います。特に開発ドキュメントに書いてあるのは PC の 175% は無視されているので、あったほうがいい気がします。

　以上です。

追記:

　詳細仕様です。

  • Small なタイル: 71x71 (Windows 8.1 は 70x70)
  • Medium なタイル: 150x150
  • Wide なタイル: 310x150
  • Large なタイル: 310x310 (UWP でも PC only)
  • List アイコン: 44x44 (Windows 8.1 は 30x30)
  • Store アイコン: 50x50
  • Badge アイコン: 24x24
  • Splash スクリーン: 620x300 (Windows Phone 8.1 は 480x800)

　基本的に Windows Phone 由来のサイズが多い。ただし、スプラッシュスクリーンのみ、Windows 8.1 から輸入されている。

　また、上にあるように List, Small, Square, Wide という 4 種類のアイコンが必要でそれぞれ、

  • List: 一辺 75% で描画。(短辺は 75% 以下でもよい)
  • Small: 一辺 50% で描画。ただし、長方形の場合、長辺が 66%。
  • Square: 一辺 33% で描画。ただし、横長の長方形の場合、長辺が 66%、縦長の長方形の場合、長辺が 50%。
  • Wide: 横の辺が 16%、縦の辺が 33%。ただし、横長の長方形の場合、長辺が 66%、縦長の長方形の場合、長辺が 50%。

となる。ただし、ブランドロゴ (いわゆる淡色のシンプルなアイコンでなくそれで製品を表すようなやつ) の場合、

  • List: 12.5% の Margin
  • その他: 16% の Margin

を設けて配置する。

詳細は

https://msdn.microsoft.com/en-us/library/windows/apps/mt412102.aspx

を参照のこと。



以上の内容はhttps://mntone.hateblo.jp/entry/2015/11/16/092223より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます
不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14