SVGからPNGへ —— 本当に画素が必要なとき（と、そうでないとき）

完璧なロゴがあるのに、それを置く場所がない —— そこには特有のもどかしさがあります。SVGはどんなサイズでも鋭く、ほとんど重さがなく、ブラウザでは非の打ちどころなく見えます。ところがメールに入れようとしたり、SNSのプレビュー画像に設定したり、少し古すぎるソフトに貼り付けようとしたりすると、ただ表示されない。真っ白。ファイルは問題ありません。置こうとした場所が、ベクターという言葉を話せないだけです。

それこそが、SVGからPNGへの変換が作業として存在する理由のすべてです。PNGのほうが優れているからではなく —— たいていは優れていません —— 世の中の多くが、画素しか読めないからです。

ベクターとラスター、手短に

SVGは絵ではありません。命令の集まりです —— ここに円を描く、そこにこのパス、これをこの色で塗る。ブラウザはその命令に従い、頼まれたサイズでその場で描き起こすので、16画素でも16,000画素でもかみそりのように鋭く、ファイルはただの数式なので小さいままです。

PNGはその逆です。色のついた画素の固定した格子で、一つの解像度で一度きり決められます。元のサイズを超えて拡大すれば、甘くブロック状になります。描ける画素がもうないからです —— 焼き込まれたものしかありません。利点は、あらゆるものが画素の格子を読めること。画像の共通通貨です。

だからSVGをPNGに変換するのは、無限の拡大性を、普遍的な互換性と引き換えにすることです。それがいい取引かどうかは、画像がどこへ行くかで完全に決まります。

本当にPNGが必要なとき

迷わずラスタライズする三つのケースです。ベクターがそもそも動かないからです。

メール。 メールクライアントはSVGを描画しません —— Gmail、Outlook、Apple Mail、事実上すべてがセキュリティ上の理由で拒みます。メール署名やニュースレターのロゴは、ラスター形式でなければなりません。透明が欲しいので、PNGにします。

SNSとOGのプレビュー画像。 リンクを共有したときに現れる小さなカード —— Open Graph画像 —— は、固定サイズのラスターでなければならず、たいてい1200x630です。各プラットフォームはそこにSVGを描画してくれません。元の素材がベクターなら、そのぴったりのサイズでPNGを書き出します。

古い、あるいはオフラインのソフトウェア。 多くのデスクトップアプリ、プレゼンツール、文書エディタ、印刷のワークフローは、SVGを読み込めないか、めちゃくちゃにします。十分な解像度のPNGを渡せば、毎回、驚くこともなく、ただ動きます。

三つとも、決め手は同じです —— 置き先が物理的にベクターを読めないので、拡大性は無関係になります。表示される形式は、表示されない形式に、いつでも勝ちます。

唯一きちんと押さえるべき点: 解像度

いちばんよく見かける、そして自分も初期にやらかしたミスがこれです。PNGは書き出したサイズで固定されるので、十分に大きく —— そして理想的には表示する正確なサイズで —— 書き出す必要があります。

ロゴを100x100のPNGで書き出して、高密度ディスプレイで300画素で表示すれば、甘くギザギザに見えます。その空間を埋める画素が存在しないのです。対処は簡単で、実際に使うサイズ、またはそれ以上で書き出すこと。とくにRetinaや4Kのディスプレイでは、公称の2倍が欲しくなることが多いです。これはベクターを離れることで手放す、唯一の本当の利点なので、目標の解像度を正しく決めるのに少し時間をかけてください。

ラスタライズすべきでないとき

置き先がSVGを読めるなら、SVGのままにします。以上です。

自分のウェブサイトなら、アイコンやロゴはベクターのままにすべきです。あらゆる画面、あらゆるズームで鋭く、同等のPNGより小さく、より高密度のディスプレイが出るたびに大きい版を書き出し直す必要もありません。そこでラスタライズするのは損しかありません —— すでに持っている互換性のために、その形式の最大の長所を捨てることになります。

そしてマスターはラスタライズしないこと。SVGは真実の源で、いつでもどんなサイズのPNGでも生み出せます。PNGは逆方向へは戻れません —— 画素の格子から、きれいなベクターのパスを取り戻すことはできません。だからSVGは残し、それぞれのPNGは一つの特定の場所のための使い捨ての書き出しとして扱います。ほかのすべてと同じ原則です —— 送るコピーを変換し、編集する原本は残す。

実際のやり方

ベクターから画素が必要なときは、ここのSVG→PNG変換ツールを使います。ブラウザ内でSVGを描画してPNGを渡してくれるので、どこにもアップロードされず、すべてが自分のマシンで起きます。行き先に合うサイズを選べば、透明を保ったきれいなPNGが手に入ります。

でも本当の技術は変換ではありません。先に問う質問のほうです —— この場所はベクターを読むか。読むなら、SVGを触らず、いちばん鋭くていちばん小さい選択肢を楽しむ。読まないなら —— メール、OGカード、頑固な古いアプリ —— 正しいサイズでラスタライズし、次回のためにSVGは安全に残す。その判断を正しくできれば、ロゴがあるべき場所に真っ白な箱が出る、ということはもう二度と起きません。