このツールでできること
冗長なノードを削除し、安全な場所でパス データを最小限に抑えることで SVG マークアップを圧縮します。
チームがアイコン セットとインライン SVG スニペットを縮小してページを高速化するのに役立ちます。ロード。
デザイン ワークフローに必要なセマンティック構造を維持しながら、最適化の機会を明らかにします。
よくある利用シーン
- フロントエンド リリースを出荷する前にアイコン バンドル サイズを削減します。
- アセットをコミットする前に、デザイン ツールからエクスポートされた SVG をクリーンアップします。
- 最適化されたインライン SVG を準備します
- CI サイズ チェックで元のファイルと最適化されたファイルを比較します。
入力例
生デザイナーのエクスポート
<svg width="512" height="512" ...>...</svg>
アイコンセットサンプル
<svg viewBox="0 0 24 24"><path d="..."/></svg>
イラストサンプル
<svg><defs>...</defs><g>...</g></svg>
出力例
縮小SVG
<svg viewBox="0 0 24 24"><path d="M2 2h20v20H2z"/></svg>
サイズデルタ
Before: 14.2 KB、変更後: 5.8 KB (59% 削減)
検証メモ
暗い/明るいテーマおよび高 DPI ディスプレイで最適化された出力を確認します。
よくあるエラーと対処法
重要な属性が削除されました
必要な ID とクラスの積極的なクリーンアップ オプションを無効にします。
アイコンの配置が変更されました
最適化中に viewBox と座標系の値をそのまま保持します。
アクセシビリティ ラベルが失われます
支援メタデータが必要なタイトル ノードと記述ノードを保持します。
グラデーション レンダリングが中断されます
defs 参照を保持し、ID を回避します
セキュリティとプライバシーの注意点
共通のプライバシー用語、ローカル処理モデル、外部リクエストラベル、DevTools での検証手順はトラストセンターを確認してください。
- SVG 最適化はセッション内でローカルに実行されます。
- このローカル ワークフローが利用可能な場合は、独自のアートワークを外部ツールにアップロードしないでください。
- 内部的な内容を含む可能性のある埋め込みコメントの出力を確認してください参考資料。
手順
- SVG オプティマイザー は最小入力で一度実行し、基準動作を確認します。
- 入力例、主要パラメータ、期待する出力を先にそろえてから確認します。
- 一度に一つの変数だけを変更して再実行し、問題点を切り分けます。
- 確認済みの出力を一つ残し、チームの基準サンプルにします。
共有前の品質チェックリスト
- 同じ入力で SVG オプティマイザー を複数回実行しても結果が一致することを確認します。
- 空値、長すぎる項目、不正文字などの境界入力を確認します。
- 共有前に秘密情報や個人情報を必ずマスクします。
- デスクトップとモバイルの両方で表示結果を確認します。
運用のヒント
SVG オプティマイザー は、提出・公開・引き継ぎの前に行う迅速な検証ステップとして運用するのが適切です。
よくある質問
一般的なサイズの縮小はどれくらいですか?
単純なアイコンは大幅に縮小することがよくありますが、複雑なアートはソースの品質によって異なります。
最適化によって外観は変わりますか?
そうすべきではありませんが、最終リリース前に必ず視覚的に比較してください。
最適化された SVG は後で編集できますか?
はい、ただし、高度に縮小されたマークアップはソース エクスポートよりも読みにくくなります。
CI 内のすべての SVG を最適化する必要がありますか?
本番アセットについては、視覚的な回帰チェックと組み合わせてはい。