🖼 画像・メディア

SVGプレビュー・整形

SVGのソースを貼る（またはファイルを開く）と、スクリプトが実行されない安全な方式でプレビュー表示します。インデント整形・1行圧縮・viewBoxやサイズの情報表示・CSS埋め込み用データURI出力に対応。処理は端末内で完結します。

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

下の欄にソースを貼り付けてもOK。処理は端末内だけで行われます。

SVGプレビュー・整形の使い方

SVGのソースを貼り付ける（またはファイルを開く）と、即座にプレビューと情報が表示されます。プレビューはimg要素のデータURIとして描画する方式のため、SVG内にスクリプトが含まれていても実行されず、ダウンロードしてきたSVGの中身確認にも安心して使えます。背景は市松模様なので透過部分もひと目で分かります。

  1. SVGソースを入力します。テキスト欄に貼り付けるか、枠にファイルをドラッグ＆ドロップ。初めての方は例チップで試せます。
  2. プレビューと情報（文字数・width/height属性・viewBox・要素数）を確認します。
  3. 必要に応じて整形（インデント2）で読みやすく、または1行に圧縮で軽量化します。圧縮時はXML宣言・コメントの除去も選べます。
  4. CSSに埋め込みたいときはデータURIスニペットをコピーして、そのままスタイルシートに貼り付けます。

具体例

  • アイコンの軽量化 → エディタで整形済みのSVGを「1行に圧縮」＋宣言・コメント除去でバイト数を削減。前後の文字数が表示されます。
  • minifyされたSVGの解読 → 「整形」でタグごとに改行・インデントされ、構造が読める形になります。
  • CSS埋め込み → 円の例を選ぶと background-image: url("data:image/svg+xml,%3Csvg...") のスニペットが生成され、コピーしてそのまま使えます。
  • 受け取ったSVGの安全確認 → スクリプトが実行されない方式なので、出所不明のファイルでも見た目を確認できます。

慣れている方向け

  • 整形は「開始タグで+1・終了タグで-1・自己終了/宣言/コメントはそのまま」の軽量フォーマッタです。属性とテキストの中身は変更しません。
  • 圧縮はタグ間の空白・改行のみ除去します（属性値・テキストノード内は保持）。整形→圧縮で元の1行に戻ります。
  • データURIは encodeURIComponent に加えてシングルクォートと括弧もエンコードするため、url() の引用符の有無を問わず使えます。
  • 外部画像・Webフォント参照を含むSVGは、外部通信を行わないため正しく描画されないことがあります。

よくある質問

入力データはサーバーに送信されますか？
いいえ。プレビューも整形・圧縮もすべてブラウザ内で完結し、SVGが外部に送信・保存されることはありません。
プレビューでSVG内のスクリプトが実行されることはありませんか？
ありません。プレビューはimg要素のデータURIとして表示する方式で、ブラウザの仕様によりSVG内のスクリプトや外部リソースの読み込みは実行されません。出所の分からないSVGでも安全に確認できます。
整形と1行圧縮では何が変わりますか？
整形はタグごとに改行し、入れ子の深さに合わせて2スペースでインデントします。1行圧縮はタグ間の空白と改行だけを取り除いて1行にまとめます。どちらも属性やテキストの内容は変更しません。圧縮時はオプションでXML宣言とコメントも除去できます。
データURI出力は何に使えますか？
CSSのbackground-imageなどにSVGを画像ファイルなしで直接埋め込むための文字列です。記号をパーセントエンコード済みなので、生成されたスニペットをそのままスタイルシートに貼り付けて使えます。
表示できないSVGはありますか？
svgタグが見つからないソースはエラーになります。また、外部の画像やWebフォントを参照するSVGは、このページが外部通信を行わないため正しく表示されないことがあります。