SVG を JPG に変換 — 解像度は自分で決められます

SVG に解像度はありません。ここに円を描く、この形をこの色で塗る、という指示の集まりで、どんな寸法でも同じ鮮明さで描けます。JPG は決まった数のピクセルの格子です。ですからこの変換には数字を選ぶ作業が必ずあり、その選択はあとから取り消せません。

多くの変換ソフトは、SVG にたまたま書いてある幅をそのまま使い、それを黙って実行します。SVG には控えめな値が書かれていることが多く、作られた場所の名残で 100 や 200 ピクセルになっています。結果は小さな画像で、誰かが拡大するまでは問題なく見えます。そして拡大した瞬間、ベクターがそもそも避けるために生まれたはずのぼやけ方をします。この変換への不満で最も多いのがこれで、画質の問題ではなく設定の問題です。

置かれる場所から逆算してください。ウェブページなら、表示される大きさの 2 倍で描き出します。高精細な画面が当たり前になって 10 年経っていて、400 ピクセルの枠に 400 ピクセルの画像を入れると、たいていのスマートフォンでは甘く見えます。印刷なら 1 インチあたり 300 ピクセルが目安です。10 センチの幅で刷る図なら、1200 ピクセルほどが要ります。

大きすぎる側に外すのは安く、小さすぎる側に外すのは高くつきます。必要より大きい JPG はファイルの大きさを損するだけで、縮めれば見た目は落ちません。小さすぎる JPG は取り返せません。その細部は最初から描かれていないからです。倍率の設定は結果の下にあるので、変換して、見て、直して、もう一度、が最初からやり直しになりません。

JPG にアルファチャンネルはありません。制限があるのではなく、ないのです。すべてのピクセルが不透明なので、SVG で透明だった部分は何かで埋めるほかなく、白がその無難な既定値です。

そして、忘れられない失敗を生むのもその既定値です。暗い背景に置くつもりで作られた白や淡い色のロゴが、JPG になり、何も入っていないように見える白い四角として納品される。プレビューでは形が見えるのに結果では見えないなら、原因はこれです。設定で対比のつく色を指定するか、PNG か WebP にしてください。あちらは透明を解決せずに保ったままにします。

SVG のほとんどはロゴ、アイコン、図です。平らな色と硬い輪郭でできています。それは JPEG の圧縮がいちばん苦手とするもので、写真のために作られた仕組みなので、平らな 2 色の境目に対しては、それをにじませて薄い縁を作るという反応をします。しかも、PNG より小さくならないことすらあります。PNG はまさにこの種類の画像が得意だからです。

ですから正直な助言は、JPG でなければならない事情がない限り PNG にしてください、になります。そして事情は実際にあります。楽天市場やヤフーの商品画像、メルカリの出品、印刷の受付システム、古い CMS、社内のグループウェア。いまも JPG しか受け付けないものは残っています。SVG の中身が写真や陰影の豊かなイラストなら、そのときは JPG のほうが本当に適切です。

SVG は書体を埋め込まず、名前で呼ぶのが普通です。描く側はその書体を持っていなければならず、ここで描いている resvg が持っているのは、あなたの機械にある書体であって、デザインソフトにあった書体ではありません。

日本語では、置き換わったことが結果を見るまで分かりにくい。欧文なら字幅が変わって行が崩れるので目につきますが、和文は字幅が変わらないので、ゴシックが別のゴシックになっただけに見えます。字間を詰めて組んだロゴタイプは、その詰めだけが消えます。直す場所はデザインソフト側です。書き出す前に文字をアウトライン化してください。字が形になれば、置き換えられるものがなくなります。

図形、線、塗り、グラデーションはそのまま正確に出ます。あやしいのはフィルター——ぼかしと影——それに描画モードと、ほかのマスクから作られたマスクです。

resvg は実際のファイルが使う範囲を実装し、実装していないものは、ほぼ正しく見える何かに近似せずに省きます。その効果に意味があるなら、想定せずに JPG を見てください。消えていたら、書き出す前にデザインソフトの側で統合してください。

SVG は、外部の写真、書体、スタイルシートを URL で参照できます。ここからインターネットに出ることはないので、参照されたファイルは単に存在しません。それは、あなたの絵が外に出ない理由と同じ性質です。

症状は、画像があるはずの場所が空白の四角になっている JPG です。リンクではなく埋め込みで書き出し直せば、その絵が頼っているものは全部一緒に付いてきます。

大きさを決めるのは、選んだ解像度であって SVG ではありません。3 KB のアイコンでも 4000 ピクセルで描き出せば数メガバイトの JPG になります。もうそのファイルは記述ではなくピクセルの格子だからです。

写真的な中身なら、品質は 85 前後が無難です。平らな色のロゴでは、そもそも問う質問が違います。どの品質を選んでも、JPEG が硬い輪郭に沿って縁を作るのは止まりません。そこでの答えは PNG です。

フォルダーごと置いてください。すべての SVG が同じ倍率で描かれ、ZIP にまとまって返ります。アイコン一式や書き出しの一括処理では、たいていこれが望みどおりです。

描画はあなたの機械で行われるので、1 枚ごとの上限も順番待ちもありません。そしてブラウザーの canvas ではなく resvg なので、最後の 1 枚も最初の 1 枚とまったく同じように描かれます。