SVG を PNG に変換

ベクター形式は、手元に置くには正解で、送るには不正解です。SVG はどんな大きさにしても決してぼやけません。ロゴやアイコンが SVG で保管されているのはそのためです。そして同じ理由で、受け付けないものも多くあります。古い Office、多くのアップロード欄、アプリのアイコン作成手順、そしてほとんどの印刷工程です。

PNG は最小の共通項です。どこでも読まれ、どこでも同じに見え、ベクターがベクターの世界から出るときに通る形式です。

決めることはこれ 1 つです。SVG には本当に大きさがないからです。形を記述しているのであってピクセルではないので、変換のときに解像度を決めなければなりません。倍率の設定がそれで、大きな数字を選んでも画質は落ちません。拡大しているのではなく描き直しているので、どんな大きさでも輪郭は鋭いままです。

役に立つ習慣があります。その画像が現れる最大の場所を考え、その 2 倍にすることです。高精細な画面が覆えます。アプリのアイコンなら、プラットフォームが求めるピクセル数にちょうど届く倍率にしてください。

SVG は文字を文字として保存し、書体を名前で参照します。書体が埋め込まれていなければ、描画側は別の書体で代用し、丁寧に字間を調整したロゴタイプが崩れて出てきます。SVG から PNG への変換が壊れて見える理由としては、これが群を抜いて多いものです。

日本語ではさらに起きやすくなります。名前で参照された和文書体が描画側にないことは珍しくないからです。恒久的な対策はデザインソフトの側にあります。書き出す前に文字をアウトライン化すれば、字は形になり、置き換えられなくなります。ついでに、誰に渡しても安全なファイルになります。

透明な部分は透明のままです。ロゴはどんな背景の上にも、白い四角を背負わずに置けます。

描画はあなたのブラウザーではなく resvg が行うので、出力はどの機械でも同一です。canvas を経由する変換ソフトは Chrome と Safari で微妙に違う結果を出します。それは、ファイルが承認されたあとで初めて気づく類の違いです。

単純な図形、線、塗りはそのまま正確に出ます。描画ソフトごとに差が出はじめるのは、仕様の凝った側です。ぼかし、影のフィルター、描画モード、そしてほかのマスクから作られたマスク。

resvg は実際のファイルが使う範囲を実装し、それ以外については意図的に正直です。対応していないフィルターは、ほぼ正しく見える何かに近似されるのではなく、省かれます。効果が重要なら、想定せずに PNG を見てください。失われていたら、書き出す前にデザインソフトで統合してください。

SVG が数キロバイトで済むのは、それが絵ではなく記述だからです。PNG はピクセルの格子で、その格子は倍率の 2 乗で増えます。倍率を 2 倍にすればファイルは 4 倍です。

SVG で 4 KB のロゴが、4000 ピクセルの PNG では数メガバイトになります。これは不具合ではなく形式の算数です。ただし、用意されている最大値ではなく必要な解像度を選ぶ理由にはなります。

これはこの変換で最も多い理由の 1 つで、答えははっきりしています。プラットフォームは正確なピクセル数を要求するので、その近くではなく、ちょうどその値に着地する倍率にしてください。あとから PNG を縮めるのは、ベクターから始めた意味を捨てる行為です。

ファビコンについては、求められているのが PNG ではなく ICO であることが多い点にも注意してください。ICO は複数の大きさを 1 つのファイルに収められます。必要な最大の大きさで PNG にして、残りは PNG から ICO のページを使ってください。

SVG は、外部の画像、外部の書体、別ファイルのスタイルシートを参照できます。それらの参照先は SVG の一部ではないので、ファイルだけがここに来れば、参照先は一緒には来ません。

結果は、写真が欠けた PNG や、書体が置き換わった PNG です。デザインソフトでは完成して見えたのにここでは欠けている、という場合はほぼこれが原因です。リンクではなく埋め込みにして、もう一度書き出してください。

フォルダーごと置いてください。すべてのファイルが同じ倍率で描かれ、ZIP にまとまって戻ってきます。アイコン一式にはたいていこれが望ましい形です。1 枚ごとの理想より、そろっていることのほうが効くからです。

描画はあなたの機械で行われるので、ファイルごとの上限も順番待ちもありません。そして canvas ではなく resvg なので、200 個目のアイコンも 1 個目とまったく同じように描かれます。