背景が白色として処理された軽量なJPG画像をSVGイラストから即座に作成します。
SVGをJPGに変換したとき、ユーザーが遭遇する問題にはパターンがあります。変換ツールを選ぶ前に、まずこれらの問題を理解しておくことで、不要な手戻りを防げます。
①透明部分が黒く塗りつぶされる
SVGはアルファチャンネル（透明度）をサポートしていますが、JPGには透明情報がありません。変換ツールによっては、透明部分をデフォルトで黒色（#000000）に変換します。白にしたい場合や背景画像と合成したい場合は、事前に背景色を指定するか、SVG to PNGでPNG形式に変換してから目的の形式に変換する方法も検討できます。
②色味が変わる・彩度が落ちる
SVGはsRGB以外のカラースペースで記述されている場合があります。変換ツールがカラープロファイルの変換を正しく行わないと、特に赤みや青みが薄くなる傾向があります。ICCプロファイルの埋め込みに対応したツールを使うか、変換後の色味を確認する習慣をつけましょう。
③ベクター特有のシャープさが失われる
SVGは拡大しても輪郭が滑らかですが、ラスター化された瞬間にピクセルの解像度に依存します。低解像度で変換すると、特に曲線部分でジャギー（ギザギザ）が目立ちます。変換時の解像度設定を十分に高くすることが重要です。
SVGはWeb標準として広くサポートされていますが、すべての場面で使えるわけではありません。SVGをJPGに変換する必要が出てくる具体的な状況を整理しておきます。
SNSプラットフォームの制約——Instagram、Twitter（X）、Facebookなどの主要SNSは、SVGファイルの直接アップロードに対応していません。アイコンやバナー、インフォグラフィックをSNSで共有するには、JPGまたはPNGへの変換が必要です。
メール添付やドキュメント埋め込み——多くのメールクライアントはSVGの表示をサポートしていません。プレゼンテーション資料やPDFへの挿入でも、互換性の高いJPGが無難です。
印刷用途——印刷会社によってはSVGを受け付けないケースがあります。ただし、印刷品質を重視する場合は解像度を300dpi以上に設定して変換する必要があります。デフォルトの72dpiでは印刷用としては不十分です。
CMSやECサイトの制限——WordPressのデフォルト設定ではSVGのアップロードが無効になっています。ShopifyやBASEなどのECプラットフォームでも、商品画像としてJPGが推奨されることがほとんどです。
SVGは無限にスケーラブルな形式です。そのため「何ピクセルで出力するか」を明確に決めてから変換しないと、期待と異なる結果になります。
用途別の推奨解像度:
SVGのviewBoxが正方形で、出力先が横長の場合は、余白の処理方法に注意が必要です。「アスペクト比を維持して余白を追加」するか、「指定サイズに合わせてクロップ」するかを事前に決めておきましょう。PixesのSVG to JPG Converterでは出力サイズをピクセル単位で指定でき、アスペクト比の維持も選択できます。
SVG内にテキスト要素が含まれている場合、変換結果は使用環境に大きく左右されます。
SVGの
対処法として2つの選択肢があります:
1. テキストをパスに変換してからSVGを保存する——IllustratorやInkscapeで「書式→アウトラインを作成」を実行すると、テキストがベクターパスに変換され、フォント依存性がなくなります。ファイルサイズはやや大きくなりますが、確実に見た目が保持されます。
2. Webフォントとして読み込まれているテキストの場合——Google Fontsなどを参照しているSVGは、変換ツール側でフォントを取得できない場合があります。この場合もパス変換が確実です。
テキストを含むSVGを頻繁に扱う場合は、作成段階でパス変換を習慣化しておくと、変換時のトラブルを大幅に減らせます。
変換自体は数秒で終わりますが、「変換して終わり」だと品質面で損をすることがあります。変換前後のステップを意識したワークフローを紹介します。
変換前：SVGの最適化
不要なメタデータ、非表示レイヤー、未使用の定義がSVG内に残っていると、変換結果に影響する場合があります。事前にSVG Optimizerでファイルを整理しておくことで、レンダリングの安定性が高まります。特に、Illustratorから書き出したSVGには不要な属性が大量に含まれていることが多く、最適化の効果が大きいです。
変換中：出力設定の確認
解像度、背景色、アスペクト比の3点を必ず確認します。「とりあえず変換」で問題になるケースの大半は、この設定の見落としです。
変換後：ファイルサイズの確認と圧縮
高解像度で変換したJPGは、想定以上にファイルサイズが大きくなることがあります。Webで使用する場合はJPG Compressorで品質を維持しながらファイルサイズを削減するのが効果的です。品質80〜85%程度であれば、視覚的な劣化はほぼ気づかないレベルで、ファイルサイズを30〜50%削減できます。
SVGから画像への変換は、JPG一択ではありません。用途によってはPNGやWebPの方が適していることがあります。
JPGが適している場面:
PNGが適している場面:
WebPが適している場面:
判断に迷う場合は、まずJPGで変換してみて、テキストの鮮明さや透明部分の扱いに問題がないか確認するのが実践的です。必要に応じてPNGへの変換に切り替えましょう。
1ファイルではなく、数十〜数百のSVGをまとめてJPGに変換する場面もあります。アイコンセットの一括変換や、デザインシステムのアセット書き出しなどです。
一括変換で見落としがちな点:
寸法の不統一——SVGファイルによってviewBoxのサイズが異なると、変換後のJPGの解像度もバラバラになります。事前にviewBoxを統一するか、出力サイズを固定することで、一貫した結果が得られます。
背景の混在——一部のSVGに背景色が設定されていて、他のSVGには透明背景しかない場合、変換結果の背景色が不揃いになります。まとめて変換するときは、すべてのファイルの背景処理方法を統一しましょう。
ファイル名の管理——大量変換後のファイル名が「converted_001.jpg」のような連番になると、後からどれがどれだか分からなくなります。元のSVGファイル名を引き継ぐ設定にしておくと、管理が楽になります。
PixesのSVG to JPG Converterは、複数ファイルのドラッグ＆ドロップに対応しており、各ファイルに出力サイズや背景色を個別に設定しながら一括変換できます。