SVG を WebP に変換

SVG は「この経路を描け、この形を塗れ」という指示の集まりで、それ自体に解像度はありません。レンダリングはある特定の大きさで指示を実行し、結果を画素として記録します。その瞬間から図面は消え、絵だけが残ります。

変換時に選んだ大きさがそのまま最終的な大きさです。あとで WebP を拡大しても、間の画素を作り出すことしかできません。ベクター素材が避けたい状況そのものです。

携帯の画面は CSS の 1 ピクセルに実機の 2 から 3 ピクセルを詰め込むので、表示サイズちょうどでレンダリングした画像は多くの端末でぼやけて見えます。2 倍か 3 倍でレンダリングしてブラウザーに縮小させるのが標準的なやり方で、平坦な色のロゴなら 2 倍でも圧縮後は小さく収まります。

例外は本当に大きな画像です。フル幅のヒーロー画像を 3 倍でレンダリングすると誰もダウンロードしたくない大きさになるので、2 倍にとどめるか、SVG をそのまま配信することを検討してください。

SVG はフォントを埋め込まず名前だけを持ちます。レンダラーがそのフォントを持っていれば正しく描かれ、持っていなければ別のものに置き換わり、幅も変わるので、ロゴのまわりのレイアウトごと崩れます。

対策は描画ソフトの側、書き出す前にあります。文字をアウトライン化すれば、文字はパスになり何にも依存しなくなります。編集可能性は失われますが、ロゴにとっては正しい取引です。

ここで書かれる WebP は常に非可逆です。既定の 82 は写真向けに調整されているため、ベクター素材では悪い方向に出ます。1 ピクセルの線ににじみが出て、平坦な色の境目にハローができます。

ロゴやアイコン、図表なら 95 以上に上げてください。平坦な色はどの設定でも軽く圧縮できるので、アーティファクトが消えてもファイルは小さいままです。厳密に一致させたいなら PNG に変換してください。あちらは可逆です。

よくあることです。自分が管理するページに載せるロゴやアイコン、単純なイラストなら、SVG のほうがどんなラスターより小さく、どの画面でも拡大してもぼやけず、CSS から再着色できます。

SVG を拒否する相手がいるときに変換してください。SNS のプレビュー画像は固定サイズの PNG か JPG を要求し、メールクライアントは信頼できず、多くのアップロードフォームは形式そのものを拒否し、セキュリティ上の理由で SVG を拒む配信先も少なくありません。

アイコンは単体ではなく一式で来ます。フォルダーごと投入すれば、各ファイルが選んだ倍率で順に描かれ、ファイル名は拡張子だけ変わって、結果は 1 つの ZIP にまとまります。

一式すべてに同じ倍率を適用してください。見た目で判断するとバラつきが出ます。SVG はバージョン管理の中で原本として残し、新しい大きさが必要になったら一括で作り直すのが手早い方法です。

レンダリングはブラウザーのタブの中、あなたの処理装置で行われます。何もアップロードされないので、待ち行列も 1 日の上限もアカウントも要りません。未公開のブランド資産をよそのサーバーに預ける心配もありません。

200 個のアイコンのフォルダーも、アップロードして取り戻す速さではなく、あなたの機械が描ける速さで変換できます。