SVG をミニファイ
SVG をミニファイ：コメント、メタデータ、余分な空白を削除
リポジトリまたは運用ビルドに入る前に、SVG マークアップをクリーンアップします。コメント、XML 宣言、エディタ データ、空のグループ、および未使用の定義を、個別に切り替え可能な 15 のパスと視覚的な比較で削除します。
新規ファイルの既定値を編集しています
プレビュー
プレビューはありません。ファイルを追加して選択すると結果が表示されます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。
SVG のミニファイで削除されるもの
SVG のミニファイは画像処理ではなくマークアップの作業です。描き直しは一切行わず、削除するか短くするだけです。エディタからの一般的な書き出しには、XML 宣言、doctype、生成ツールのコメント、Inkscape や Figma の名前空間、どこからも参照されていない id 属性、中身を包むだけの空のグループ、どの要素も使っていない defs のエントリ、小数点以下 6 桁で書かれた座標が入っています。ブラウザはそのすべてを無視します。これらを取り除くとファイルは小さくなり、同じくらい役に立つこととして、SVG をリポジトリに入れて他のソースファイルと同じようにレビューするときに、差分が読めるようになります。
SVG ファイルをミニファイする方法
- 1
SVG をドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 2
「安全」「バランス」「最大」から選び、不要な処理を個別に切ると、ファイルごとの削減率がその場で更新されます。
- 3
「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー：ファイルはブラウザから出ません
変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。
ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。
よくある質問
ミニファイと圧縮は同じものですか？
実質的には同じです。同じ処理が両方の役目を果たしていて、このページと「SVG を圧縮」は同じエンジンで動いています。違うのはどこに重きを置くかです。ミニファイの対象は、人やエディタが残したマークアップ、つまりコメント、メタデータ、名前空間、余分な空白です。圧縮の対象は転送されるバイト数で、そこでは整ったソースよりも、座標を丸めることや属性を削除することのほうが効いてきます。
ミニファイすると CSS や JavaScript が壊れませんか？
スタイルシートやスクリプトが SVG の中を参照している場合は、壊れることがあります。識別子の名前を変える処理はありませんが、「最大」はドキュメント内のどこからも参照されていない要素と属性を削除します。外部のルールが狙っているのは、まさにそうしたものです。SVG を外部からアニメーションさせたりスクリプトで操作したりしている場合は、「安全」を使うか、「不可視の要素を削除」と「未使用の定義を削除」を切って、公開する前に結果を確認してください。
viewBox は残したまま width と height だけ削除できますか？
できます。「viewBox を正規化」と「width と height を削除」は別々の処理です。viewBox を残したまま固定のサイズを削除するのは、CSS でコンテナに合わせて伸縮させたい SVG に向いています。両方を残すのは、単体で開くファイルや、スタイルを一切当てないドキュメントに置くファイルに向いています。