SVGをPNGに変換

決まっていなかった解像度を決める

SVGにはピクセルもサイズもありません。このパス、あの塗り、この曲線といった描画命令の集まりです。だからこそどれだけ拡大してもくっきりしており、ロゴはできるだけ長くSVGのままにしておくべきなのです。ラスタライズすると、1つのサイズに永久に固定されます。そのため、画像が表示される最も大きな場所に合わせてサイズを選んでください。 また、2倍や3倍の密度の画面では2倍や3倍のピクセルが必要になることも忘れないでください。64ポイントで表示するアイコンを最新のスマートフォンできれいに見せるには、192ピクセルが必要です。

最も問題が起きやすいのは文字で、その理由は理解しておく価値があります。SVGは「この文字列をHelvetica Neueで組む」と指示します。レンダリングする環境にHelvetica Neueがなければ別のフォントで代用され、レイアウトがずれます。枠に収まっていたタイトルがはみ出してしまうのです。URLで参照されたWebフォントは、ここではまったく読み込まれません。画像としてレンダリングされるSVGは意図的に隔離されており、ネットワークにアクセスできないからです。解決策は、どのデザイナーもいずれ学ぶものです。書き出す前に文字をアウトライン化してください。 そうすれば文字の形がパスになり、フォントがまったく不要になります。

同じ隔離の仕組みで、ほかの意外な挙動も説明できます。リンクされたビットマップ、つまりどこかの.pngを指すimage要素は、何も表示されません。スクリプトは実行されないため、JavaScriptで自分自身を描くSVGは、空になるか途中までしか描かれません。宣言的なアニメーションは初期状態、つまり最初のフレームの静止画としてレンダリングされます。ファイル内で完結しているものはすべて完璧に動作します。グラデーション、フィルター、クリッピングパス、マスク、埋め込まれたデータURI画像、ぼかし効果は、すべて描かれたとおりにレンダリングされます。

この変換先としてはPNGが正解で、JPEGは適していません。ベクターのアートワークは単色の塗りとシャープな輪郭でできており、それはまさにPNGがうまく圧縮でき、JPEGが台無しにするものです。JPEGではシャープな輪郭すべてにフチのようなノイズが出ます。透過は本物のアルファチャンネルとして引き継がれるので、適切なサイズで書き出したロゴはどんな背景にもなじみます。SVGがサイズを一切指定せずviewBoxだけを持つ場合は、縦横比はそこから決まり、サイズは自由に選べます。

ほかの目的には

resvgやrsvg-convertは、本物のフォント環境を使ってコマンドラインでSVGをレンダリングするので、文字は代用フォントではなく意図した書体で表示されます。rsvg-convert -w 512 in.svg -o out.png だけで済みます。Inkscape --export-type=png --export-dpi=300 は仕様を最も完全に実装したもので、軽量なレンダラーでは近似になってしまうフィルターや描画モードも扱えます。

そもそもラスタライズする前に、本当にPNGが必要なのかを確認してください。どのブラウザも10年以上前からSVGをネイティブに表示しており、Webサイトのロゴやアイコンなら、SVGのほうが小さく、無限にくっきりしていて、CSSでスタイルを変えることもできます。本当にピクセルが必要な場面は、思われているより限られています。ファビコン、SNSのプレビュー画像、メール、アプリストア用の素材、そしてベクターを読み込めないソフトです。