ツール
入力
結果
結果はここに表示されます。Illustrator、Figma、Sketch、Inkscape から書き出した SVG には、ブラウザが決して使わないものがたくさん含まれています。エディターのメタデータ、空のグループ、既定値の属性、小数点以下 6 桁まで書かれた座標などです。ほとんどの SVG ビルドツールの背後にある最適化ツール SVGO は、preset-default プラグインセットでそれらを取り除きます。マークアップを貼り付けると、最適化されたファイル、見た目が何も変わっていないことを確認できるレンダリング済みプレビュー、削減されたサイズが得られます。SVGO 4 は、拡大縮小とアクセシビリティにとってどちらも重要な viewBox と <title> を既定では削除しなくなりました。ここでは、オプションで自分で決められます。
動作のしくみ
- 小数点以下の桁数は、パスや変形に含まれるすべての数値の精度を決めます。3 ならアイコンのサイズでは違いが見えませんが、1 や 0 では細かい部分がゆがむことがあります。
- マルチパスはファイルが縮まなくなるまでプラグインを繰り返し実行し、前のパスの後で初めて結合できるようになるパスも拾います。
- width と height を削除しても viewBox は残るため、SVG はコンテナに合わせて拡大縮小します。CSS でサイズを決めるアイコンにはこれが望ましい状態です。
- プレビューは data URL から <img> タグで描画するため、SVG 内のスクリプトがこのページで実行されることはありません。
データの行き先
どこにも行きません。このツールは完全にブラウザ内で動作します。貼り付けたテキストはページが処理し、サーバーに送信されることも、ログに記録されることもありません。
このツールは無料で登録不要です。結果は開いているページの中にだけあり、どこにも保存されません。
必要なポイント
このツールは無料です。ログインもポイントも必要ありません。
よくある質問
- viewBox を残すべきなのはなぜですか？
- viewBox は、SVG を拡大縮小可能にする座標系を定義します。これがないと、CSS で新しいサイズを与えた SVG は拡大縮小されず切り取られます。古いバージョンの SVGO は width と height が一致するたびに viewBox を削除していましたが、バージョン 4 でそれをやめました。残しておくのが正しい既定です。
- 最適化で SVG の見た目が変わることはありますか？
- preset-default は見た目上ロスがないように設計されており、プレビューで確認できます。何かがずれた場合、よくある原因は、細かい小さなアイコンに対する小数点以下の桁数の設定が低すぎることなので、3 以上に上げてください。ID も短縮されますが、これが問題になるのは、ファイル外の CSS や JavaScript がそれを参照している場合だけです。
- <title> 要素は残りますか？
- はい。スクリーンリーダーはインライン SVG のタイトルを読み上げるため、SVGO 4 は removeTitle を既定のプリセットから外しました。純粋に装飾的な画像であれば、自分でタイトルを削除し、使う場所で要素に aria-hidden を付けてください。
- 画像やフォントが埋め込まれた SVG はどうなりますか？
- 埋め込まれた base64 のビットマップやフォントはそのまま残り、SVGO はその周りのベクターマークアップを最適化します。大部分が埋め込み PNG のファイルはほとんど小さくなりません。ビットマップを別途圧縮または変換するか、代わりに本物のラスター画像として書き出してください。
背後にあるオープンソース
このツールは svg/svgo（MIT）の上で動作しています。同じ処理を自分のプログラムに組み込みたい場合は、そのライブラリを使ってください。
svg/svgo別の呼び方
- svg 最適化
- svg 最適化 オンライン
- svgo オンライン
- svg 圧縮
- svg ミニファイ
- svg ファイルサイズ 削減