輪郭の品質を保ちながらJPGをSVGに変換する方法と注意点
JPGは非可逆圧縮のため、安易なトレースでは圧縮ノイズが乱れたベクター輪郭になります。きれいに拡大できるSVGを作る方法と、変換に向かない場合を解説します。
JPGは、ラスター画像をベクター形状にトレースすることでSVGに変換できます。ただし、一般的なJPEGの符号化は非可逆です。圧縮によってブロック境界、鋭い輪郭の周囲のリンギング、そのほかのノイズが残り、トレースツールが画像の細部と解釈することがあります。(JPEGの概要、ITU-T T.81仕様) そのため、考えるべきなのは単なる「JPGの変換方法」ではなく、「JPGからきれいなSVGを作る方法」です。
その方法と、JPGがPNGより注意を要する理由、そもそも変換しない方がよい場合を解説します。
要点
- 手元にある最高品質のJPGを使います。 圧縮が少ないほど、トレースをきれいにしやすくなります。
- フラットでコントラストの高い作品、たとえばロゴ、アイコン、単純なイラストは変換に適しています。写真は向きません。
- ノードの少ないきれいなパスにベクター化し、JPGの圧縮で増えた余分な色を統合します。
- 結果を確認します。 編集可能なパス、鮮明な輪郭、適切な色数が必要です。
- JPGからSVGへの変換ツールで、今すぐ試せます。
JPGがPNGより難しい理由
PNGは画像のサンプルを可逆で保存できるため、保存し直してもJPEGのような圧縮ノイズは発生しません。JPGは一般に連続階調の画像に使われ、ファイルサイズを減らすために画像情報を捨てることがあります。品質設定と元画像によっては、その圧縮がブロック状のノイズや輪郭周辺の薄いリンギングとなり、元の単色デザインにはなかった、ほとんど同じ色を増やします。W3CのPNG 3仕様を参照してください。
JPGをベクター化すると、トレースツールがそれらのノイズを本来の細部と間違え、ぼやけた輪郭、小さな不要な点、余分な色を作ることがあります。元画像とトレース方法の両方が結果に影響します。PNGから始める場合は、品質を落とさずPNGをSVGに変換する方法をご覧ください。JPEGの圧縮問題を除けば基本は同じです。現代のウェブでよく目にする3つ目の形式、WebPにも独自の変換上の注意点があります。
変換に向く画像と向かない画像
JPGは、うまくベクター化できる画像と、できない画像があります。
| 適したJPG | 向かないJPG |
|---|---|
| ロゴ、アイコン、モノグラム | 写真やポートレート |
| フラットでコントラストの高いイラスト | グラデーション、柔らかい影、光彩 |
| 線画や文字 | 強く圧縮されたファイル、低解像度ファイル |
| 少数の単色で構成された画像 | 複雑で質感の多いフルカラーの場面 |
JPGが左の列に当てはまるなら、変換を進められます。写真やグラデーションの多い画像は、ベクター化すると色の塊に単純化されます。ラスターのまま残すか、先に作品をフラットな図形で作り直してください。
JPGをSVGに変換する手順
- 手元で最も良い元画像から始めます。 高品質で高解像度のJPGは、保存、共有、再圧縮を何度も繰り返したものより、はるかにきれいにトレースできます。元のPNGやベクターがあるなら、そちらを使ってください。
- 荒れている場合は、先に整えます。 作品に合わせて切り抜き、圧縮ノイズが強い場合はコントラストを少し上げ、図形が背景からはっきり分かれるようにします。
- ベクター化します。 JPGからSVGへの変換ツールにJPGを読み込み、画像をベクターパスとして再構築します。すべてのノイズを写す密なトレースではなく、ノードの少ないきれいなパスを目指してください。
- 色を単純化します。 JPGの圧縮は、ほとんど同じ色を増やすことがあります。作品が実際に使う少数の色に統合します。単純なパレットは確認と編集がしやすくなります。
- ダウンロードして確認します。 下のチェックリストを使ってください。
PerfectVectorでの例
JPGでは、意図した図形と圧縮ノイズを見分けることが目標です。PerfectVectorは画像をベクターパスとして再構築し、内蔵カラーエディターで元画像やトレースが増やした余分な色を統合できます。JPGをSVGに変換し、自分でパス、ノード数、パレットを確認できます。クレジットカードなしで、最初の画像を無料変換できます。
結果を素早く確認する。 良いJPGからSVGへの変換は、次の条件を満たします。
- 編集可能なパスであり、JPGを
.svgで包んだものではありません。SVGの<image>要素では、ラスターをパスに変換せず、そのまま埋め込むことが仕様上可能です。W3Cの埋め込みコンテンツ仕様を参照してください。 - 鮮明な輪郭で、圧縮によるにじみや小さな点が残っていません。
- 少ないノード数で、何千もの点ではなく、きれいな曲線になっています。詳しくは、ノード数が重要な理由をご覧ください。
- 整ったパレットで、圧縮が加えた余分な色ではなく、意図した色だけが含まれています。
変換ツールを使わない方がよい場合
すべてのJPGにベクター化が適しているわけではありません。
- 写真は、平面的な色の塊に単純化されます。ラスター画像のまま残してください。
- グラデーションや質感の多い作品は、繊細さを失います。ベクターが必要なら、フラットな図形で作り直してください。
- 小さすぎるファイルや強く圧縮されたファイルは救えません。ぼやけたJPGをトレースしても、ぼやけたSVGになります。より良い元画像を探すか、作品を作り直してください。
目安はほかのベクター化と同じです。フラットでイラスト的な作品に向き、写真には向きません。初めての場合は、画像のベクター化とは何かからご覧ください。
よくある質問
JPGをSVGに無料で変換できますか？
はい。変換ツールにJPGをアップロードし、色を単純化してSVGをダウンロードします。クレジットカードなしで、最初の画像を無料変換できます。ただし、.svgにJPGを埋め込んだだけでなく、本当にトレースしたベクター、つまり編集可能なパスか確認してください。
SVGに変換したJPGが角ばったり、乱れたりするのはなぜですか？ JPGは非可逆圧縮のため、圧縮ノイズや輪郭のにじみを含みます。トレースは作品と一緒にそれらも取り込みます。より高品質なJPGを使い、コントラストを上げ、ノードの少ないきれいなパスに変換してノイズを減らしてください。
SVGへの変換にはJPGとPNGのどちらが適していますか？ 可逆のPNGは圧縮ノイズがないため、よりきれいな出発点になります。ただし、高品質でフラット、かつコントラストの高い作品のJPGもきれいに変換できます。形式より元画像の品質が重要です。
JPGの写真をSVGに変換できますか？ 可能ですが、通常はおすすめしません。写真にはグラデーションや階調が多すぎて、きれいな図形にならず、単純化された色の塊か、巨大なファイルになります。ベクター化はロゴ、アイコン、イラストに適しています。
色付きのJPGをSVGに変換するには？ カラーでトレースできる変換ツールを使い、圧縮が加えたほぼ同じ色を統合して、デザインに必要な少数の色だけを残します。色数を減らして整えると、SVGが軽くなり、編集もしやすくなります。
出典
- JPEG：JPEG 1標準の概要：JPEG静止画符号化標準と、一般的な非可逆モードの公式概要です。
- ITU-T：勧告T.81：圧縮と復号の動作を定めるJPEGの規範的な仕様です。
- W3C：Portable Network Graphics (PNG) 仕様、第3版：PNGの可逆画像表現とアルファ対応を定める現行標準です。
- W3C：SVGの埋め込みコンテンツ：ラスター画像をベクターパスにせずSVGに埋め込めることを示す標準です。
JPGのロゴやイラストがピクセルのままで困っていますか？きれいに拡大縮小できるSVGに変換してください。ベクター化し、色を単純化して、数秒でダウンロードできます。
