note63

事情

SVGからPNGに変換する方法(のメモ)

ちょっとfontelloで選択したフォントをpngにしたくなった。 調べてみるとさすがにttfやwoffから変換する方法は出てこなくてsvgからpngに変換するためのTipsがたくさんあったのでそれをメモ的にまとめておく。

注:動かなかった的な記述があるものがあるけどだいたい動きます。詳細は一番下を見てください。

Imagemagickのconvertを使用する方法

このページImagemagickあんまりよくないぜって言われてるのを見て試さなかったのでなんとも言えない。

inkscapeコマンドを使う方法

これも実は試してないなんでかって言うとインストールの段階で失敗したから。 Homebrewでインストールしようとすると

widgets/desktop-widget.h:242:32: error: stray ',' at end of member declaration
     GtkWidget *commands_toolbox,;
                                ^
make[1]: *** [desktop-events.o] Error 1
make: *** [install-recursive] Error 1

と言われ、自分でビルドしようとすれば

./configure --enable-lcms --disable-poppler-cairo
(中略)
configure: error: GNU gettext tools not found; required for intltool

と言われる。 Homebrewで実行されていたコマンドをそのまま打っただけだからその時点で間違ってたのかもだけど...
ちなみにこの時点でgettextもintltoolも入ってた。

rsvg-convertを使う

これは普通にHomebrewで入れることができた。 しかし、生成されたpngファイルは真っ白である。なぜだ!!!???

qlmanageを使う

qlmanageはMacにもともとあるコマンドでたぶんクイックルックとかで使われているんだと思う。 これも真っ白になった。絶望だ。

PhantomJSを使う

jsのライブラリをコマンドライン上で実行するためのコマンド。 実行したけどもちろん真っ白だったよ♡

svg CONVERTERを使う

Macのネイティブである。古そうである。入れてみる。

.....

動かない...:(´ཀ`」∠):

有名なあの変換サイトを使う

変換系を調べるとよくヒットする例のあのサイトである。 変換(svg to png)しようとしたら失敗したorg

iConverを使う

いろんな拡張子のファイルをスタイルを選んで変換できるwebアプリ。MacやWindowsのネイティブもある(有料)。 ここでも失敗した。このへんでうすうす気づいてたけど、たぶんfontelloから落としたsvgに問題がある。
いろいろと試してみて意味がなかったわけじゃないけど多分svgの形式がよくないんだと思う。

ここで救世主現る!!!

これはFont Awesomeのシンボリックフォントをpng形式で出力してくれるPythonプログラム!僕が変換したかったアイコンは全部Font Awesome!つまりこれで事足りる!

ということこれを使ったらできた。 ちなみにPillowというPythonライブラリが必要なのでpipを使ってインストールする。

$ pip install pillow

いろいろ文句を言いましたが失敗を繰り返した原因はおそらくsvg内に複数のアイコンが定義されていたからだと思います。 なので1個にすれば動くはず...