JPGをSVGに変換
JPGのロゴ、スケッチ、アイコンを、どんなサイズにも拡大でき、Cricut、Silhouette、IllustratorやWebページで使える本物のパスでできたSVGに変換します。トレース機能が色の領域ごとに図形として描き直すため、ベクター形式の器に画像を入れただけのものではなく、正真正銘のベクターデータになります。
画像をSVGに変換
またはJPG, JPEG, JFIF … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
高くすると小さな点や細かなテクスチャが残ります。低くすると数ピクセル未満の図形を除いてノイズを取り除きます。
高くすると、低解像度やJPG入力で生じたギザギザの輪郭が丸くなります。低くすると鋭い角が保たれます。
ほとんどの画像には滑らかな曲線、幾何学的なロゴには直線、ドット絵のカクカクした形を残すにはピクセルの縁を選びます。
PDFを入力した場合のみ使用します。変換するページを指定します(例:1 または 1-3, 5)。各ページが別々のファイルになります。
このツールの使い方
- 1
JPGをアップロード
ロゴ、イラスト、フラットなグラフィックのJPGまたはJPEGを、最大20ファイルまでまとめてドロップします。元画像が大きくきれいなほど、曲線は滑らかになります。
- 2
色を設定
色数の初期値は8で、ほとんどのロゴに向いています。署名やラインアートの場合はカラーモードを白黒に切り替えてください。JPGが小さい場合やブロックノイズがある場合は、スムージングを上げます。
- 3
変換して確認
ベクター化(SVGに変換)を押し、できたファイルをブラウザで開いて拡大して確認します。細部が欠けているときは、詳細設定の精細さを上げてもう一度変換してください。
JPGからSVGへの変換は、ロゴ、アイコン、スタンプ、署名、イラストなど、もともと平坦な画像に最適です。元画像の色数が少ないほど、きれいなベクターになります。
JPGがベクターパスになる仕組み
JPGは1992年のJPEG方式で圧縮されたピクセルの集まりで、SVGは2001年からW3C標準となっている、座標と曲線で表した図形のリストです。両者の間に直接の変換方法はないため、変換ツールはトレースを行います。ピクセルを限られた数の色にまとめ、各色の領域の境界を見つけ、その境界に沿って滑らかな曲線をあてはめます。
同じ考え方は、Potraceライブラリをもとにしたインクスケープ(Inkscape)の「ビットマップのトレース」や、Illustrator CS6で導入された「画像トレース」にも使われています。ツールごとに違うのは、色の選び方と、ノイズをどこまで強く滑らかにするかです。この2点を、ここでは色数、精細さ、スムージングで調整します。
JPGには特有の難しさがあります。画像を8 × 8ピクセルのブロックに分けて各ブロック内の細部を捨てるため、くっきりした輪郭の周りにかすかなハローが残ります。トレースはそれを余分な図形として認識してしまいます。このページでスムージングの初期値を通常の50ではなく60にしているのは、そのためです。
JPGをSVGに変換するときの色数の選び方
- 2
1色のロゴ、ステンシル、ビニールデカール
- 4–8
フラットなロゴやアイコン(初期値8)
- 16–32
イラスト、カートゥーン、バッジ
- 64
最大値。ポスタリゼーション風の写真
JPGのSVG変換でできること・できないこと
誤解JPGをSVGとして保存すれば、どんなサイズでも鮮明になる。
事実拡大しても鮮明なのは、トレースされたパスだけです。JPGを埋め込んだだけのSVGは、JPGとまったく同じようにぼやけます。
誤解色数が多いほど、良いベクターになる。
事実16~32色を超えると、増えるのは小さな図形とファイル容量が中心です。ロゴは4~8色のほうがきれいに見えます。
誤解ぼやけたJPGでもくっきり仕上がる。
事実トレースでギザギザの輪郭は滑らかにできますが、JPGにもともとない細部を作り出すことはできません。
JPGのロゴをきれいにトレースするコツ
| 推奨 | 非推奨 |
|---|---|
| 手元にある最も大きなJPG(できれば横幅1000 px以上)を使う。 | 小さなサムネイルや、スクリーンショットのスクリーンショットをトレースする。 |
| アップロード前に、余白や縁をトリミングで切り落とす。 | 2色のロゴなのに色数を64にする。 |
| 署名や手書きメモには白黒を選ぶ。 | 人物写真の肌の色が保たれることを期待する。 |
| ステッカーやカット用データでは背景を削除をオンにする。 | トレース前にJPGを何度も保存し直す。 |
SVGができあがれば、ベクターが使われるほとんどの場面で活用できます。Webデザイナーはインラインアイコンとしてページに貼り付け、看板業者はプロッターに送り、クラフト愛好家はCricut Design Spaceに読み込みます。画像しか受け付けないマーケットプレイスの出品など、再びラスター形式が必要な場合は、SVGをPNGに変換で好きなサイズの鮮明なコピーを書き出せます。
SVGよりDXFを好むレーザーカッターやCADソフトには、同じJPGをJPGをDXFに変換でトレースしてください。AutoCADや多くのレーザー用ソフトが読み込める形式で輪郭を書き出します。
JPGのSVG変換に関するよくある質問
SVGは本当にベクターですか?JPGをSVGファイルに入れただけではありませんか?
本物のベクターです。一部の変換ツールは、SVGの画像タグにJPGを埋め込むだけなので、拡大するとぼやけます。このツールは輪郭をトレースしてSVGのパスとして書き出すため、テキストエディタで開くと、エンコードされたピクセルデータではなく座標が並んでいるのが確認できます。
人物や風景の写真もSVGに変換できますか?
変換はできますが、写真というよりポスターや塗り絵のような仕上がりになります。ベクターは平坦な色の面で表現するのに対し、写真には無数の微妙な色合いがあるためです。イラスト風にしたい場合は24~32色、カッティングマシン用なら白黒を選んでください。詳しくは写真をSVGに変換をご覧ください。
CricutやSilhouetteのカット用ファイルに適した設定は?
白黒または2~4色を選び、背景を削除をオンにして白い部分が図形としてカットされないようにします。さらに輪郭線のみにすると、マシンが輪郭に沿って動きます。Cricut Design SpaceとSilhouette Studioはどちらも、SVGを直接読み込めます。
トレースしたロゴの輪郭がガタガタになるのはなぜですか?
JPGの圧縮はくっきりした輪郭の周囲にわずかなノイズを加え、トレースがそれを拾ってしまいます。スムージングを上げるか、精細さを少し下げてください。幾何学的なロゴなら、カーブの設定で直線を選ぶ方法もあります。最も効果的なのは、より大きなJPGから始めることです。
SVGファイルの容量はどのくらいになりますか?
4~8色でトレースしたフラットなロゴなら、通常は数KBから数十KBです。色数が増えたり細かいテクスチャがあったりするとパスが増えるため、トレースした写真が元のJPGより大きくなることもあります。SVGを最適化を使うと、座標を丸めてパスを統合し、容量を抑えられます。
JPGよりPNGから変換するほうがよいですか?
多くの場合はそうです。同じロゴのPNGなら圧縮ノイズがなく、すでに背景が透明なこともあるため、よりきれいにトレースできます。両方お持ちならPNGをSVGに変換を使ってください。JPGしかない場合も、スムージングの値を上げれば差の大半は埋まります。