SVGにしやすいPNG
PNGは、ベクター化の出発点としていちばん向いていることが多い形式です。JPEGのようなノイズがなく、透過背景もSVGでそのまま透明になります。書き出したロゴ、アイコン、スタンプ、輪郭のきれいな線画のスキャンなら、いちばんきれいなパスになります。ロゴなら512〜1024pxあれば十分です。
PNGのロゴ、アイコン、イラストを、透過背景ごと拡大縮小自在なSVGに。ベタ塗り・精細・幾何学的なデザイン向けのプリセット付き。
タップしてファイルを選択
ここにPNG画像をドラッグ&ドロップ
または ファイルを選択
または画像を貼り付け(Ctrl+V)
PNG · 1ファイル最大20MB
ここに結果が表示されます
PNGは、ベクター化の出発点としていちばん向いていることが多い形式です。JPEGのようなノイズがなく、透過背景もSVGでそのまま透明になります。書き出したロゴ、アイコン、スタンプ、輪郭のきれいな線画のスキャンなら、いちばんきれいなパスになります。ロゴなら512〜1024pxあれば十分です。
SVGはすべての図形をテキストの座標で記録します。シンプルなロゴなら数KBで済みますが、細かいPNGや写真のようなPNGは何千ものパスになり、元の画像より重くなることもあります。「白黒」モードや「シンプル」プリセットを使えば、図形の数が減ってなめらかになり、ファイルも軽くなります。
ここでは「PNGをベクターに」も「PNGをSVGに」も同じ意味です。ピクセルを図形としてトレースし、どのベクター編集ソフトやブラウザでも開けるSVGファイルとして保存します。「カラー」モードでは画像の色ごとに別々のレイヤーとして残し、「白黒」モードでは、はんこやカッティングマシン、アイコンに最適な、きれいな1枚のシルエットにします。輪郭をなめらかにするには、手元でいちばん大きなPNGから始め、ベタ塗りのロゴなら「シャープ」プリセット、イラストなら細部のレベルを上げましょう。細部を増やすほど小さな形が残り、減らすほど曲線がなめらかで、ファイルも軽くなります。
写真、スクリーンショット、やわらかいグラデーションのある画像はPNGのままにしましょう。ピクセルのほうがうまく表現でき、ファイルも小さく済みます。ファビコンからバナーまで、どんなサイズでもくっきりさせたいロゴ、アイコン、イラスト、文字や、コードで色を変えたい画像にはSVGを使います。Webサイトなら両方を使い分けられます。ロゴとアイコンはSVG、写真はPNGかWebPです。
PNGファイルをドラッグ&ドロップするか、クリックして選びます。ファイルプランなら複数のファイルをまとめて追加できます。手元にPNGがなければ、サンプル画像で試せます。
フルカラーでベクター化するなら「カラー」、単色のシルエットにするなら「白黒」を選びます。
プリセット(シンプル・精細・シャープ)を選ぶか、細部のレベルや色の精度などの詳細設定を調整します。
SVGと元の画像を並べて見比べ、拡大して輪郭を確認してから、ベクターファイルをダウンロードします。
PNG(Portable Network Graphics)をSVG(Scalable Vector Graphics)に変換すると、ピクセルでできた画像が、図形や曲線を数式で表したものに変わります。PNGがピクセル1つひとつの色を記録するのに対し、SVGは座標、パス、塗りの色で画像を表すので、どんなサイズにしてもギザギザになりません。
PNGは可逆圧縮とアルファチャンネルの透過に対応した、優れたラスター形式です。ただ、看板や名刺、レスポンシブなWebサイトのために画像のサイズを変えたいとき、ピクセルは足かせになります。SVGなら解像度に左右されないので、16×16のアイコンにも1600×1600のポスターにも、同じファイルでどちらもくっきり使えます。
かんたん・すばやいこのPNG→SVG変換ツールは、WebAssemblyの技術ですべてブラウザ内で動きます。画像がサーバーにアップロードされることはなく、変換はお使いの端末で行われます。傍受されるものも、漏れるデータも、どこかに保存されるファイルもありません。タブを閉じれば、すべて消えます。
発表前のロゴやお客様のデザインも端末から出ません。トレースエンジンはお使いのブラウザで動きます。
ブラウザ内で完結PNGからSVGへの変換について知っておきたいこと