PowerPoint などで描いた図を SVG で保存すると、中身が1行にぎっしり詰まっていて、大きさも実寸（今回の例では 2673 × 1315）のまま。ブログに貼るとはみ出すし、ソースも読めない、、ということで、整形と大きさの調整をするツールを作りました。
ツール
下にそのまま埋め込んでいます。広い画面で使いたいときは 別のページで開く からどうぞ。
読み込んだファイルはブラウザーの中だけで処理していて、どこにも送信されません。
使い方
- SVG ファイルをドラッグ＆ドロップする（クリックして選ぶ、SVG のコードを Ctrl+V で貼り付ける、でも OK）
- 左側で、見た目の大きさなどを選ぶ
- 「オリジナル」と「整形後」を切り替えて見比べる
- 「整形後をダウンロード」で保存する（「整形後のコードをコピー」もある）
できること
| 機能 | 内容 |
|---|---|
| 整形 | 1行に詰まった SVG を、1要素1行に字下げする（スペース2個／4個／タブ） |
| 見た目の大きさ | 幅を指定（高さは縦横比から自動計算）、元の大きさのまま、レスポンシブ（表示する場所の幅に合わせる） |
| 余白 | 図形のある範囲に切り詰めて、周りに指定した余白を残す |
| フォント | Windows 以外の端末向けのフォントを書き足す |
| 安全化 | <script>、onclick などのイベント属性、javascript: のリンクを取り除く |
何をしているのか
viewBox を付けて大きさを変える
Office から出力したままの SVG の先頭はこんな感じ。width と height が実寸で、全体が1行です。
<svg width="2673" height="1315" xmlns="http://www.w3.org/2000/svg" ...><g transform="translate(-910 -776)"><rect x="1413.5" .../><text ...>Tomcat</text> ...
幅 800 を指定して整形すると、こうなります。
<svg width="800" height="394" viewBox="0 0 2673 1315" xmlns="http://www.w3.org/2000/svg" ...>
<g transform="translate(-910 -776)">
<rect x="1413.5" y="777.5" width="1685" height="1312" ... />
<text ...>Tomcat</text>
...
</g>
</svg>
ポイントは viewBox。ここに元の座標の範囲（0 0 2673 1315）を書いておくと、width と height を変えても、図全体がその大きさに合わせて拡大・縮小されます。高さの 394 は、縦横比を保ったまま幅を 800 にした値（1315 × 800 ÷ 2673 ≒ 394）です。
字下げは見た目に影響しない
要素と要素の間に入れた改行や空白は表示されないので、字下げしても見た目は変わりません（整形前と整形後を同じ大きさで描いて画素単位で比べたら、違いは 0 でした）。ただし <text> の中の空白は表示に出るので、文字を持つ要素の中には手を入れないようにしています。
フォントの注意
Office の SVG は、文字のフォントに游ゴシック（Yu Gothic）を指定しています。SVG の文字は見る側の端末のフォントで描かれるので、游ゴシックがない端末では別のフォントになります。Mac には游ゴシックが入っているけれど名前が YuGothic（空白なし）なので、「Windows 以外の端末向けのフォントを追加する」にチェックを入れると、これとヒラギノ・Noto Sans JP などを書き足すようにしました。
ただ、Office の SVG は文字の位置が座標で固定されているので、游ゴシック以外で表示されると文字の幅が変わって少しずれることがあります。そこはフォントを足すだけでは防げないらしい、、
仕組み：HTML ファイル1枚だけ
このツールは HTML ファイル1枚だけで動いていて、サーバー側の処理はありません。難しいところはブラウザーが持っている機能がやってくれています。
| やっていること | 使っているブラウザーの機能 |
|---|---|
| ファイルを読む | FileReader、ドラッグ＆ドロップのイベント |
| SVG を要素に分解する | DOMParser |
| 属性を書き換える | setAttribute、querySelectorAll |
| 図形の範囲を測る（余白の切り詰め） | getBBox() |
| 画面に表示する、ダウンロードさせる | Blob、URL.createObjectURL、<a download> |
| コピーする | navigator.clipboard |
自分で書いたのは、字下げを付けて文字に戻すところと、大きさの計算くらい。HTML 1枚でここまでできるのには驚きました。
ソースコード
GitHub に置いています（MIT ライセンス）。
https://github.com/oha-yo/svg-format
v1.0.0（2026-10-03）が最初の版です。変更の内容は CHANGELOG.md に書いていきます。
