Android 用 SVG を iOS 用 PNG に一括で変換する

Android で使う SVG を iOS で使う PNG に．

概要

Android では，UI のアイコンに SVG 画像を使える．同じ画像リソースを iOS でも使いたい時があるとして，今回はそのための簡単な一括変換の方法を紹介します．環境は Windows 10 です．Mac OS だとコマンドの書き方が違うと思うので，この方法はたぶんダメ．

基本的な機能は次の通り．たくさんの「48 x 48ピクセル，180 dpi の SVG 画像」から「透過を反映した100 x 100 ピクセルの PNG 画像」を作成します．それも一気に．

用意するもの

コマンドラインから mogrify というコマンドを使えるようになるために，ImageMagick をインストールします．ImageMagick のインストールについてはここを参考にしてください．僕は詳しく書きません．このページでは「画像の差分を取る」ということまで書いてるけど，それは今回は関係ないよ．

変換したい SVG 画像を用意します．Android っぽい（マテリアルデザインっぽい）SVG のフリーのアイコンはここがとても役に立つ．Google の標準の画像も併せて置いてある．独自のアイコンもあるけど，Google の標準と見分けが付かないくらいトンマナが揃ってるからとてもいいね．

このサイトからダウンロードした SVG だけが対象，というわけではなけれど，解像度と DPI の値によっては出力画像のサイズが 100 x 100 ピクセルにならないかもしれないので注意です．詳しくは後述．

使い方

まずは以下のテキストをコピペして，svg2png.bat のような名前を付けます．

@echo off
mkdir svg2png
SET command=mogrify -format png32 -density 375 -background none -path ./svg2png *.svg
call %command%
cd ./svg2png
ren *.png32 *.png

これを変換したい目標の SVG と同じディレクトリに置いて，ダブルクリックで実行．すると新しく「svg2png」のフォルダが作られて，その中に SVG が PNG に一括変換されたものが入ります！

仕組み

僕もいまいち分かってません笑．コマンドプロンプトで mogrify を手打ちすれば動作するけど，bat ファイルから起動する方法が分からず，参考にしたのは漫画を1つの画像に結合する bat ファイルをつくった – Qiita．

透過を反映する方法が分からず，結局「png32」という謎形式にしてから（RGBA の 4 チャンネル × 8 bit って意味だと思うけど），改めて「png」にリネームするという汚い方法です．「png32」について参照したのは PNG のインデクスカラーをフルカラーに変換 : 研究に使うポスグレ．

解像度を調整するのが難しかった．単に拡大するだけだとボケた PNG が出力されてしまう．コマンド中の density オプションの引数で目的の解像度を得るよう調整してる．たぶん引数は次のように調整すれば，自由自在だと思う．

density引数 = (目的解像度 * 元SVGのDPI)/(元SVGの解像度)

今回は 48 x 48 ピクセル，180 dpi の SVG を元に，100 x 100 ピクセルの PNG を目的としてたので，上式に従って density 引数を 375 にしています．