SVG ビューアー&オンラインエディター

SVG ファイルをブラウザ上で即座に表示・編集・エクスポート。アップロード不要、インストール不要、完全プライベート。

無料で使う →

機能

✏️

ライブコード編集

SVG ソースコードを直接編集し、300ms デバウンスで即座にプレビューが更新されます。

🖼

SVG と PNG をエクスポート

編集した SVG ファイルをダウンロードするか、1×・2×・4× 解像度で PNG にエクスポートします。

🎨

背景切り替え

白・チェッカーボード(透明)・黒の背景を切り替えて正確にプレビューできます。

🔒

XSS セーフなレンダリング

SVG は DOMPurify でサニタイズしてからレンダリングするため、悪意あるスクリプトから安全です。

⚙️

属性パネル

SVG ルート要素の width、height、viewBox、fill、stroke を直接編集できます。

📊

SVG メタデータ

ファイルサイズ、総要素数、アニメーションの有無を即座に確認できます。

使い方

1

SVG を読み込む

「ファイルを開く」で SVG をアップロードするか、ドラッグ&ドロップ、SVG コードの直接貼り付け、または「サンプル」で組み込みサンプルを試します。

2

編集してプレビュー

左パネルで SVG ソースコードを編集すると、右パネルがリアルタイムで更新されます(300ms デバウンス)。属性パネルでルート SVG プロパティをすばやく編集できます。

3

エクスポートまたはコピー

「↓ SVG」で編集済みファイルをダウンロード、「🖼 PNG」でラスター画像にエクスポート、または「📋 コードをコピー」で SVG ソースをクリップボードにコピーします。

よくある質問

この SVG エディターは無料ですか?
はい、完全無料です。サインアップ不要で、すべての処理はブラウザ内で行われます。
SVG ファイルはサーバーにアップロードされますか?
いいえ。ファイルはデバイスの外に出ることはなく、すべてブラウザ上でローカルに処理されます。
不明なソースの SVG をレンダリングしても安全ですか?
はい。すべての SVG コンテンツは DOMPurify でサニタイズされてからレンダリングされ、スクリプトや危険な属性は削除されます。
SVG を PNG にエクスポートできますか?
できます。1×・2×・4× 解像度を選択して PNG ボタンをクリックすると、SVG が Canvas に描画され PNG 画像としてエクスポートされます。
チェッカーボード背景は何を意味しますか?
チェッカーボードパターンは SVG 内の透明な領域を示し、塗りつぶしがない部分や半透明の部分を確認するのに役立ちます。

← pudone! ホームへ戻る