PNGをSVGに変換ツール ラスターアイコンをベクター形式で使用できるように、SVGコンテナに埋め込むことができます。
PNGをSVGに
ラスターアイコンをベクター形式で使用できるように、SVGコンテナに埋め込むことができます。
画像をアップロード
PNG、JPG、その他のラスタ画像ファイルをドロップまたは選択してください。
SVGを生成
画像は自動的に適切な寸法のSVGコンテナに埋め込まれます。
ダウンロードまたはコピー
SVGファイルをダウンロードするか、プロジェクトで使用するためにSVGコードをコピーしてください。
What Is PNGをSVGに?
このツールは、Base64でエンコードされたデータURIを使用して画像データをSVGコンテナ内に埋め込むことで、ラスターイメージをSVG形式に変換します。これは、画像をベクタパスにトレースするのではなく、簡略化されたアプローチです。生成されるSVGファイルは、任意のSVGエディターで開いたり、HTMLに埋め込んだり、SVGファイルが受け入れられるどこでも使用できます。編集可能なパスを備えた真正のラスターからベクタへの変換には、Inkscape Trace Bitmapなどの専用ツールを使用してください。
Why Use PNGをSVGに?
-
SVGと互換性のあるワークフローでの迅速な変換
-
画像の品質が正確に保存される - トレース・アーティファクトはありません
-
HTML/CSS埋め込み用に直接SVGコードをコピー
-
.svgファイルとしてダウンロードしてデザインツールで使用
Common Use Cases
SVGワークフロー
ラスタ画像をSVGベースのデザインシステムで使用するためにSVGコンテナにラップします。
HTML埋め込み
画像を直接HTMLに埋め込むためのインラインSVGコードを生成します。
デザインツールへのインポート
ベクタ編集ソフトウェアへのインポート用にラスタ画像からSVGファイルを作成します。
プレゼンテーション資産
SVG入力が好まれるツールで使用するために画像をSVG形式に変換します。
Technical Guide
変換では、FileReader.readAsDataURL()を使用してラスターイメージファイルをBase64でエンコードされたデータURIとして読み取ります。Image要素がこのデータURLをロードして自然な寸法を決定します。このツールは、xlink:href属性がデータURIに設定されているimage要素を含むSVG XML文字列を生成し、SVGのビューポート寸法は元の画像ピクセルと一致します。ファイルサイズはBase64エンコードのオーバヘッドにより、約33%大きくなります。
Tips & Best Practices
-
1これは真のベクタトレースではなく、SVGラッパーを作成し、内部の画像はラスタままです
-
2真のベクタ変換には、Inkscape（無料）またはIllustrator Image Traceを使用してください
-
3SVGコードは直接HTMLページに埋め込むことができます
-
4ファイルサイズはBase64エンコーディングにより元の画像より約33%大きくなります
Related Tools
Frequently Asked Questions
Q 真のベクタパスを作成しますか?
Q なぜSVGファイルがPNGよりも大きいですか?
Q SVG内の画像を編集できますか?
Q JPGや他の形式も機能しますか?
Q 出力はすべてのSVGエディターと互換性がありますか?
About This Tool
PNGをSVGに is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.