SVG.LA

PNGをSVGに変換して、形と色を調整

アイコンやバッジ、シンプルなイラストを編集可能なベクターパスへ。元画像の透明部分と輪郭を見比べ、必要な形を残してStudioで仕上げましょう。

PNG専用1枚・最大10 MiBStudioで確認して生成
PNGのみ・1枚あたり最大10 MiB

SVG に変換する画像をアップロードまたは選択してください。

PNGをSVGに変換して、形と色を調整
SVG に変換する画像をアップロードまたは選択してください。

生成にはログインとクレジットが必要です。このボタンだけでは生成を開始しません。

PNGをSVGに変換:透明部分と輪郭を比較

各組で元画像と実際にトレースした SVG を並べています。全体の似方だけでなく、形状と境界も確認できます。

元の PNG
透明な PNG キャンバス上の青とティールの鳥とオレンジ色の尾
SVG 変換結果
鳥の色付き形状と外側の輪郭を示すトレース済み SVG

透明な背景に映えるシルエット

この鳥は少数の単色で構成され、背景は透明です。トレース後のくちばし、尾、形状の間の余白を見比べてください。

概要

PNGをSVGに変換すると何が変わる?

画素で描くPNGに対して、SVGは形をパスで表します。元画像を参考に形を再構成するため、失われた細部が復元されるわけではありません。

色や形を編集できる状態へ

輪郭や塗りを確認し、用途に合わせて調整できます。元画像を残して比較しましょう。

透明な縁を点検

半透明の画素がある縁では、細い色の帯や余分な領域が現れる場合があります。

使う場所に合わせて仕上げる

拡大表示と実際の表示サイズを見比べ、必要な細部だけを残します。

PNGをSVGに変換するための元画像選び

元画像の準備で、その後の確認や修正が進めやすくなります。

輪郭が鮮明

スクリーンショットより元の書き出し画像を優先。単に拡大しても輪郭の情報は増えません。

色面が分かれている

少ない色のはっきりした面は、近い色が細かく混ざる画像より整理しやすくなります。

Studioで調整

生成後にパス、配色、比率を確認し、ダウンロード前に使い道に合う状態へ整えます。

どんなPNG画像に向いている?

主な形が分かりやすいグラフィックから始めましょう。

アイコンや記号

小さく表示したときに、線や隙間がつぶれないか確認します。

バッジやステッカー

外形と主要な色面を優先。柔らかな影や光沢は整理が必要な場合があります。

ウェブ用のイラスト

ページの背景に重ね、輪郭の縁や配色が自然に見えるか点検します。

PNGをSVGに変換する手順

画像を準備し、Studioで生成してから形を確認します。

PNGを1枚選ぶ

10 MiB以下の鮮明な画像を用意。余白は整え、細い部分を切り落とさないようにします。

Studioへ引き継ぐ

画像はローカルの下書きとしてログイン後に引き継げます。クレジットを確認し、自分で生成を開始します。

比較して書き出す

明暗の背景で輪郭を比較。不要な形や配色を調整し、SVGをダウンロードします。

PNGをSVGに変換する前後の確認

透明背景と色の境界を中心に、元画像と結果を見比べましょう。

市松模様は本当の透明部分?

透明を表す市松模様が見えても、画像の中に模様そのものが描かれている場合があります。別の背景色に重ねて確認し、必要なら画像編集ツールで準備してください。背景が画素として入っている画像を選ぶと、その模様も形として再構成される可能性があります。背景を事前に整え、元データを確かめましょう。より鮮明な原本が別の形式なら、画像をSVGに変換するページでJPEG、WebP、GIFも選べます。

半透明の縁と小さな穴

滑らかに見えるPNGの輪郭には半透明の画素が含まれます。ベクター化後に細い縁が残ったり、近い色の小領域に分かれたりすることがあります。白と暗い背景の両方に重ね、外周だけでなくカップの持ち手や歯車の穴も確認。不要な領域を整えながら、物の特徴を伝える隙間は残してください。

元の PNG
元の PNG に描かれた青い六弁の幾何学的な花
SVG 変換結果
六つの曲線的な花びらを持つ青い花の SVG トレース

花びらに沿って曲線を確認する

同じ形の繰り返しは、曲線のばらつきを見つける手がかりになります。花びらの接続部分と中心の見え方を確認してください。

残す色と省く効果を決める

主役の色、アクセント、輪郭など、配色の役割を決めると判断しやすくなります。任意の説明欄は、変換後の確認やStudioで続ける編集の目標を残すメモです。最初のベクター化は元画像と変換設定に基づき、文章によって背景除去や色変更を自動で行うものではありません。生成後に色面や細部を比較し、ブランド色が必要な場合は見た目だけでなく色の値も照合してください。

拡張子だけで判断しない

SVGという名前でも、内部に画像が埋め込まれているだけでは画素をパスとして編集できません。生成した形を確認し、利用先のツールでも開いてみましょう。拡大表示では輪郭の乱れ、実寸では細部の読みやすさを点検します。複雑な図形は容量が増えることもあるため、用途に必要な細かさと実際のファイルサイズの両方で判断します。ブランドのロゴをSVGに変換する場合は、文字の形、字間、正式な色の値も併せて確認します。

よくある質問

PNGをSVGに変換するときのよくある質問

透明背景、入力形式、生成前の確認について。

PNGをSVGに変換できる画像の上限は?

このページはPNG専用で、1枚あたり最大10 MiBです。JPEGはJPG用ページ、WebPやGIFはImage to SVGを利用できます。

透明背景は完全に保たれますか?

元画像を参考に再構成するため、半透明の縁や小さな穴には修正が必要な場合があります。明暗の背景で確認してください。

写真をPNGで保存すれば変換しやすい?

形式を変えても写真の複雑さは変わりません。髪や質感は簡略化されることがあり、単純な色面の画像の方が確認しやすくなります。

SVGは必ず軽くなりますか?

いいえ。細かなパスが多い画像では容量が増える場合もあります。用途に必要な形と、実際のファイルサイズを確認してください。

ログインとクレジットは必要ですか?

Studioでの生成に必要です。開始前に消費量を確認できます。画像の選択やStudioへの移動だけでは生成されません。

色はあとから変えられますか?

生成された形と塗りをStudioで確認し、調整できます。指定色がある場合は参照値と比較して仕上げてください。