SVG プレビュー

SVG ファイルのプレビューとソースコードの表示

ここに SVG ファイルをドロップ、またはクリックして選択

対応形式：SVG、SVGZ · Ctrl+V / ⌘V で貼り付けることもできます

または SVG コードを貼り付け

ヒント：ページ上のどこでも Ctrl+V / ⌘V で SVG コードを貼り付けられます。

SVG プレビューの使い方

SVG ファイルや貼り付けたコードを安全に確認できます。ズーム・移動・背景の切り替えに加え、表示サイズ、width、height、viewBox、要素数を表示。ソースの編集はすぐ反映され、スクリプトは実行されません。

SVG または SVGZ ファイルをページにドロップするか、「または SVG コードを貼り付け」にコードを入れて「SVG を追加」をクリックします。ページ上のどこでも Ctrl+V で貼り付けられます。

背景を「市松模様」「白」「黒」で切り替え、ボタン、Ctrl/⌘ + スクロール、キー + − 0 1 でズームします。ドラッグで移動し、ダブルクリックで全体表示に戻ります。

「詳細」で表示サイズ、width、height、viewBox、ファイルサイズ、要素数を確認します。図の上にポインターを置くと SVG の座標が表示されます。

「ソース」でコードを編集すると、プレビューが入力に合わせて更新されます。構文エラーは行と列で示されます。

「書き出し」で「SVG をダウンロード」または「Data URI をコピー」をクリックします。

よくある質問

安全です。SVG は画像としてのみ表示されるため、スクリプトやイベントハンドラーは実行されず、参照先のウェブ上のファイル（画像・フォント・スタイルシート）も読み込みません。アップロードもされません。

xmlns 宣言が抜けている可能性が高いです。プレビューでは自動で補ってお知らせを表示するので、「コードに追加」でソースを直してからダウンロードしてください。

width・height も viewBox もないため、ブラウザの既定サイズで扱っています。width と height だけがない場合は、viewBox からサイズを決めます。

URL エンコードされた data:image/svg+xml 形式の文字列です。CSS の background-image や img の src にそのまま使えます。Base64 形式やファイルの軽量化が必要なら SVG オプティマイザーを使ってください。