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

Androidで使うSVGをiOSで使うPNGに.
a

概要

Androidでは,UIのアイコンにSVG画像を使える.同じ画像リソースをiOSでも使いたい時があるとして,今回はそのための簡単な一括変換の方法を紹介します.環境はWindows 10です.Mac OSだとコマンドの書き方が違うと思うので,この方法はたぶんダメ.
基本的な機能は次の通り.たくさんの「48×48ピクセル,180dpiのSVG画像」から「透過を反映した100×100ピクセルのPNG画像」を作成します.それも一気に.
test

用意するもの

コマンドラインから「mogrify」というコマンドを使えるようになるために,ImageMagickをインストールします.ImageMagickのインストールについてはここを参考にしてください.僕は詳しく書きません.このページでは「画像の差分を取る」ということまで書いてるけど,それは今回は関係ないよ.
変換したいSVG画像を用意します.Androidっぽい(マテリアルデザインっぽい)SVGのフリーのアイコンはここがとても役に立つ.Googleの標準の画像も併せて置いてある.独自のアイコンもあるけど,Googleの標準と見分けが付かないくらいトンマナが揃ってるからとてもいいね.
このサイトからダウンロードしたSVGだけが対象,というわけではなけれど,解像度とDPIの値によっては出力画像のサイズが100×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ファイルから起動する方法が分からず,参考にしたのはこのサイト.

透過を反映する方法が分からず,結局「png32」という謎形式にしてから(RGBAの4チャンネル×8bitって意味だと思うけど),改めて「png」にリネームするという汚い方法です.「png32」について参照したのはこのサイト.

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

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

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

コメントを残す

Powered by WordPress.com. テーマ: Baskerville 2 by Anders Noren

ページ先頭へ ↑

%d人のブロガーが「いいね」をつけました。