SVG を JXL に変換

SVG を PNG や JPEG にする人は多いですが、JXL を選ぶのは効率を重視するビルドパイプラインや、次世代形式にすでに対応済みの環境向けに書き出したい場合です。ロゴやアイコンをアプリの中に埋め込むために、軽い静止画として持っておきたいときに使われます。

ブラウザーでの表示にそのまま使うつもりなら、対応状況を先に確認しておくと安心です。JXL はまだ WebP や AVIF ほど広く読めるわけではありません。

SVG はこのサイト専用の描画エンジンで、横幅 1,024 ピクセルになるように描画されます。高さは元の SVG の viewBox の縦横比から決まります。ブラウザーの描画に頼らず、どの環境でも同じ結果になるようにするための設計です。

倍率を 0.1 から 10 まで指定でき、既定の 1 より大きくすればより高解像度に、小さくすればより低解像度に書き出せます。細部の多いイラストを大きく使いたい場合は、倍率を上げておくとよいでしょう。

SVG の描画エンジンは背景を完全に透明にして絵を描くので、SVG に背景の指定がなければ、その透明さは JXL にもそのまま引き継がれます。JXL はアルファチャンネルを持てる形式なので、ここで背景を塗りつぶす処理は行われません。

同じラスタライズの経路でも GIF や JPEG が行き先だと透明は背景色で塗りつぶされますが、JXL、PNG、WebP、AVIF はいずれも透明を保つ側の形式です。

既定の品質は 82 で、JPEG や WebP、AVIF への変換と同じ数値です。この数値はスライダーで調整でき、上げれば画質を、下げればファイルサイズを優先できます。

JXL には可逆圧縮のモードがありますが、この変換ではそれを使うようライブラリーに指示していません。どんな品質を指定しても、非可逆の符号化が行われます。ラスタライズしたベクター画像を 1 ビットも欠けさせずに保存したい場合、この経路は向いていません。

SVG の中の文字は、ファイルに埋め込まれたフォントがあればそれで描かれます。埋め込みがない場合はフォールバックが起きますが、具体的にどのフォントに置き換わるかはこの描画エンジンの内部の挙動で、公表されている仕様として断定できるものではありません。

文字を含む SVG を正確な見た目のまま書き出したいなら、変換前にフォントをファイルへ埋め込んでおくのが確実です。

SVG が SMIL アニメーションや CSS アニメーションを含んでいても、ここでの書き出しは静止画 1 枚です。動きのある SVG から動く JXL が作られることはありません。

ぼかしやドロップシャドウのような SVG フィルター効果が、この描画エンジンでどこまで再現されるかも、個々のファイルで確かめる必要があります。単純な塗りと線で構成された SVG がもっとも確実に描画されます。

JXL は現行の画像形式の中でも圧縮効率が高く、同じ見た目の PNG や JPEG より軽く収まることが多い形式です。単純な図形やロゴであれば、そのぶんの効果がはっきり出ます。

ただし対応する閲覧環境が限られる形式でもあるので、軽さと引き換えに、どこでも開けるという安心感は手放すことになります。用途に応じて選んでください。

処理はすべてブラウザーの中で行われ、SVG がどこかにアップロードされることはありません。1 ファイルあたり 100 MB まで、1 度に 100 個までまとめて置け、終わったものから ZIP で受け取れます。

アイコンセットのように多数の SVG を一括で書き出したい場合にも向いています。