画像をSVGに変換

JPGやPNGは色の付いた小さな四角が並んだものですが、SVGは図形のリストです。変換するために、トレース処理ではまず画像を少数の色に減らし、同じ色で隣り合うピクセルを領域としてまとめ、各領域の境界に沿って曲線を当てはめます。そのため仕上がりは、設定よりも元画像の質に大きく左右されます。無地の背景にあるきれいなロゴはほぼ完璧にトレースできますが、同じロゴでもぼやけたスクリーンショットではうまくいきません。

SVGは2001年からW3C標準となっており、最新のブラウザのほか、Illustrator、Inkscape、Figma、Affinity Designer、Cricut Design Spaceなどのカッティングソフトでも開けます。テキスト形式なので、シンプルなロゴを最適化したSVGなら数KBほどに収まることも珍しくありません。トレース前の画像の準備については、PNGをSVGに変換する方法のガイドで解説しています。

よく検索される2つの用途には専用ページがあります。写真として保存されたロゴ向けのJPG to SVGと、透過付きで書き出した画像向けのPNGをSVGに無料変換です。どちらも同じトレース処理を使っています。

最初に選ぶのはカラーモードです。白黒ではしきい値(初期値128、範囲1〜254)を境に、暗いピクセルは黒、明るいピクセルは白になります。細い線が消えるなら下げ、図形がまだらに見えるなら上げます。カラーとグレースケールでは代わりに色数を使い、2〜64の範囲で初期値は16です。ロゴなら4〜8、イラストなら16〜32が目安です。

精細さは、どれくらい小さな点まで図形として残すかを決めます。高くすると質感が残り、低くするとノイズが取り除かれます。スムージングはギザギザの輪郭を丸めるので、小さい画像やJPG圧縮された元画像に有効です。曲線では、ほとんどのイラストには滑らかな曲線、幾何学的なロゴには直線、ドット絵にはピクセルの輪郭を選べます。背景を削除は端に接する最大の図形を取り除きます。SVGを最適化は座標を丸めてパスを統合するため、ファイルサイズが半分ほどになることもあります。輪郭線のみは塗りなしの線として書き出すので、プロッターやカッティングマシン向けです。