SVG 最適化
デザインツールから書き出した SVG は、その多くが絵ではありません。エディターのメタデータ、コメントの塊、レイヤー名、小数点以下六桁まで書かれた座標、既定値をなぞるだけの属性が一緒に入っています。このツールはビルドツールが使うのと同じ SVGO を、貼り付けた内容やドロップしたファイルに対して実行し、結果を元と並べて示します——新しいマークアップ、前後のサイズ、gzip 後のサイズ（サーバーが実際に送る量）、そして両方をレンダリングした絵まで。何も壊れていないことがひと目で分かります。スイッチは実際に効くものだけです——座標の精度、CSS や JavaScript が参照しているかもしれない ID を残すか、コンテナに合わせて伸縮するよう width と height を外すか。処理はすべてページ内で行われ、ファイルはアップロードされません。
処理はすべてブラウザ内で行われ、ファイルはアップロードされません。
使い方
- SVG をボックスに貼り付けるか、.svg ファイルをドロップします。
- 「最適化」を押すと、サイズ・gzip 後のサイズ・両方のレンダリングが下に出ます。
- まだ大きければ精度を下げます。小数 1〜2 桁でも通常は見分けがつきません。
- SVG 内の要素を CSS や JavaScript が指しているなら「ID を残す」を有効にします。
- 結果をコピーするか、.svg としてダウンロードします。
よくある質問
- SVG はどこかにアップロードされますか？
- いいえ。SVGO はブラウザのタブ内で、ボックスの中のテキストに対して動きます。サーバーへ送られるものはなく、タブを閉じればコピーも残りません。
- 二つのプレビューが同じに見えます。想定どおりですか？
- はい、それが狙いです。最適化は描画しないものを取り除き、描画するものをより短い形に書き直します。プレビューが違って見えるなら、取り除かれた何かにファイルが依存していたということなので、精度を上げるか ID を残して試し直してください。
- ID はどんなときに残すべきですか？
- SVG の外側の何かが ID を参照しているときです——`#icon-star path` のような CSS、getElementById を使う JavaScript、別ファイルの `<use href="#…">` など。SVGO は既定でバイト数を減らすために ID を短くするので、こうした参照が切れます。ファイル一つで完結している場合は内部の参照もまとめて更新されるため、どちらでも正しく動きます。
- 精度スライダーは実際に何を変えますか？
- パスデータの数値を丸めます。12.345678 のような座標は 3 なら 12.346、1 なら 12.3 になります。画面上のアイコンなら小数 1〜2 桁でもまず区別がつかず、パスが半分になることもあります。大きな図や大きく拡大するイラストでは、丸めすぎると曲線の揺れとして見えてきます。
- なぜ gzip 後のサイズを出すのですか？
- 実際に流れるのがその値だからです。ウェブサーバーは SVG を圧縮して送るため、生のバイト数は削減量を大きく見せます。繰り返しの空白を消すのはディスク上では劇的でも、gzip の後ではほとんど効きません。正直な比較は gzip の方です。
- width と height は外すべきですか？
- インラインで使い CSS で寸法を決めるなら外してください。与えられた枠を満たすようになります。`<img>` タグなど、ブラウザが固有サイズを必要とする場所で使うなら残してください。無いと既定サイズで描かれることがあります。viewBox は常に残します——これが無いと拡大縮小の基準になる座標系そのものが失われます。
関連ツール
PDF 圧縮
PDF 内の画像を再エンコードしてサイズを縮めます。文字は選択も検索もそのまま。アップロードはありません。
画像圧縮
JPEG・PNG・WebP 画像をブラウザで圧縮・リサイズ。
HTML / CSS / JS ミニファイア
HTML / CSS / JavaScript の空白とコメントを除去 — 削減サイズを表示してコピー。
SVG → PNG 変換
SVG を任意サイズの PNG にラスタライズ — 透過 / 白 / カスタム背景に対応、ブラウザ内処理。
オーディオトリマー
波形をドラッグして音声の必要な部分だけを切り出し、フェードを付けて WAV でダウンロード。アップロードはありません。
HAR ファイルインスペクター (HTTP Archive ビューア)
Chrome / Firefox / Safari DevTools からエクスポートした .har ファイルをドロップすれば、すべてのリクエスト — メソッド、ステータス、サイズ、時間、コンテンツタイプ — を即座に表示。統計、最遅・最大テーブル、フィルター・ソート可能なエントリ。すべてブラウザ内処理。