トップ地図アプリMap4 > SVGファイルをPNGファイルに変換する

SVGファイルをPNGファイルに変換する

はじめに

地図アプリの自作は10年近くなる。開発言語は Python、C++、C#、Java/Android Java という変遷をたどってきた。

地図には数十~数百という様々なアイコンが表示される。 PNGファイルの場合、上記いずれの言語でもそのまま描画できる。 しかし、アイコン画像ファイルはSVGファイルで入手する方が精度高く任意の大きさに拡大・縮小できる。

開発言語によっては SVGファイルを直接表示できるが、Android Java では事前に SVGファイルを PNG ファイルに 変換する必要がある。

当初は、Windowsタブレットでの地図表示であったため、タイル画像のサイズは 256x256画素であった。 しかし、現在のスマホでは、768x768画素程度が適当である。 これにともない、アイコン画像のサイズも縦横3倍が適当な大きさになる。

256x256画素タイル用アイコンを読み込んで、縦横3倍に拡大するよりも、 縦横が3倍のアイコンを表示するほうが綺麗になる。

同じ地図を Androidタブレットでも表示する。 この場合は、タイル画像のサイズを 256x256画素か 512x512画素とする。 後者の場合、縦横2倍のアイコンファイルがほしい。

SVGからPNGへの変換は ImageMagickだったか Inkscape だったかをプログラムに組み込んだこともあるが、 最近は、SVGファイルを手作業で修正して、それを Internet Explorer で表示して、 PNGファイルでセーブする方法を採っている。 数が少ない場合はこれでよいが、一挙に、数十~数百の SVGファイルについて、 サイズ2倍と3倍のPNGファイルを作るのは容易ではない。 何か、もう少し、楽な方法を考えたい。

アイコンのサイズは同じではない。256x256画素タイル用のアイコンのサイズを基準として、 それを2倍とか3倍にする必要がある。ざっとチェックした限りでは、そのようなコマンド例はなかった。

SVGファイルをパースして、通常は viewBox から設計サイズを把握して、 width、height を2、3倍に変える必要がある。

viewBox がない場合には、元の width、height から viewBox を作ってから、 width、height の値を変更する。

Inkscape 1.0.2

現在のパソコンには Inkscape 1.0.2 がインストールされていた。以前、これを使っていたのであろうか。 ImageMagickもインストールしているため、どちらを使っていたか確かではない。

inkscape --help または inkscape -? でコマンド一覧が表示される。

リファレンス

[1] CairoSVG: Convert your SVG files to PDF and PNG.
[2] SVGをPDFとPNGへ変換する方法【Python】
[3] SVG形式からPNG形式への画像の変換方法
[4] How to convert a SVG to a PNG with ImageMagick?