ツール
ガイド

SVG ビューアー＆縮小

画像

ブラウザ内で SVG をプレビューし、コメント、<metadata>、Inkscape・Sodipodi 名前空間、タグ間の空白を削除します。前後のバイト数と viewBox 情報をリアルタイム表示。アップロードなし。

100% クライアントサイド バックエンドなし

リモート URL の取得は行いません。JSON を直接貼り付けてください。

入力
出力
プレビュー
·
ビューボックス:

プレビューは <img> タグで描画されるため、SVG 内のスクリプトは実行されません。データはブラウザから送信されません。

SVG を貼り付けるとプレビュー・縮小します。
このページの内容

SVG ビューアー＆縮小ツールとは？#

SVG は、Web 上のアイコン、ロゴ、ラインアートに適した形式です — どんなサイズでも鮮明で、テキストとして編集できます。しかしデザインツールが書き出す SVG ファイルには、大量の不要物が付いて回ります。Inkscape や Sodipodi のエディタ名前空間、<metadata> ブロック、作成コメント、タグ間の空白です。これらはファイルを膨らませ、ソースを読む人を悩ませます。SVG 縮小ツールは、レンダリングに影響しないものを削り落とし、どれだけ節約できたかを報告します。

本ページはビューアーでもあり、縮小ツールでもあります。左に SVG ソースを貼り付けると右に描画されます。縮小 に切り替えると、自作のクリーンアップ処理が走り、コメント、メタデータ、エディタ名前空間、要素間の空白を削除して、バイトの節約量を表示します。プレビューは画像の data URI を経由して描画されるため、SVG に埋め込まれたスクリプトは一切実行されません — 信頼できないファイルも安全に調べられます。

使い方#

  1. 左の 入力 ペインに SVG を貼り付けるか、サンプル をクリックして小さな例を読み込みます。
  2. 出力 ペインとプレビューが即座に更新されます。ツールバーは既定で 縮小 になっているため、出力はクリーンアップ済みの小さい SVG です。
  3. 出力を元の変更なしのソースにしたい場合は オリジナル に切り替えます（縮小版との比較に便利です）。
  4. ペイン下の統計パネルを読みます。
    • 縮小前 / 縮小後 / 削減 — 入力と出力の UTF-8 サイズと、節約された割合。
    • 削除サマリー — 何個のコメント、メタデータブロック、エディタ要素、エディタ属性、空白ノードが削られたか。
    • ビューボックス — ルート <svg> から読み取った width / height / viewBox のジオメトリで、アートボードサイズを一目で確認できます。
  5. 出力ペインの コピー または ダウンロード を使って縮小済み SVG を取得します。クリア で両ペインを消去します。

主な機能#

  • svgo ではない、ゼロから書いた本物の縮小ツール。 svgo は標準的な Node 向けツールですが、Node の fs と path に依存し、ブラウザではきれいに動作しません。本ページは独自のツリーウォークを同梱しているため、サーバー側の依存なしで動きます。
  • 5 種類の不要物を削除。 コメント、<metadata> ブロック、Inkscape/Sodipodi 名前空間の要素と属性、要素間の空白をそれぞれカウントして報告します。
  • テキストを考慮した空白処理。 <text>、<tspan>、<title>、<desc>、<style>、<script> 内の空白は保持されるため、ラベルや埋め込み CSS は処理を生き残ります。
  • 安全なプレビュー。 描画は data URI を持つ <img> を使います。ブラウザはこれを非実行の画像として扱うため、SVG に埋め込まれたスクリプトは走りません。信頼できないファイルもリスクなしで貼り付けられます。
  • 正直なバイト勘定。 サイズは UTF-8 バイト（文字数ではない）で測られるため、CJK テキストや絵文字を含むファイルは実際の転送サイズを報告します。
  • 100% ローカル。 解析とシリアライズはブラウザ内で行われます。SVG がページの外に出ることはありません。

実例#

典型的な Inkscape の書き出しは、実際のアートの前に数行のエディタ名前空間宣言と <metadata> ブロックで始まることがあります。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

これを貼り付け、モードを 縮小 のままにすると、出力は次のように畳み込まれます。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

統計パネルはおおむね 縮小前 ~520 バイト、縮小後 ~210 バイト、約 60% 削減 を報告し、削除サマリーにはコメント 1 件、メタデータブロック 1 件、エディタ属性 1 件（inkscape:connector-curvature）と表示されます。チェックマークはプレビューでも同じように描画されます — 描画に影響するものは一切削除されていません。

よくある質問#

SVG に埋め込まれたスクリプトは実行されますか？#

いいえ。プレビューは <img src="data:image/svg+xml;base64,…"> として描画され、<img> で読み込まれた画像はスクリプト実行コンテキストではありません — ブラウザはその SVG 内の <script> を一切実行しません。そのため、自分が作ったものではない SVG を調べる際も安全です。ただし、元の <script> タグは縮小出力にもそのまま残ります。それが実行されるかは、後で SVG をどのように埋め込むかに依存します。

svgo をそのまま使わないのはなぜですか？#

svgo は Node のビルドパイプラインでは適切なツールですが、Node の fs と path モジュールに依存しており、ブラウザのタブではきれいに動作しません。本ページの縮小ツールは Node への依存がない自己完結型のツリーウォークで、完全にクライアント側で動作します。その代わり、svgo の最も深い最適化ほど積極的ではありません。

ファイルの削減量が小さいです。#

すでに手書きされた（エディタ名前空間、メタデータ、コメントを含まない）ファイルは削るものがほとんどなく、削減は空白分の数パーセントにとどまることがあります。最大の削減効果は、デザインツールの書き出し（Inkscape、Illustrator）で得られます。不要物の大半はそこから発生するからです。

縮小すると SVG の描画結果が変わりますか？#

いいえ。本ツールが削除するカテゴリ（コメント、メタデータ、エディタ名前空間、要素間の空白）にはレンダリングのセマンティクスがないためです。テキスト要素（<text>、<title>、<desc>、<style>、<script>）内の空白は、そこでは意味を持つ可能性があるため、意図的に保持されます。