SVG最適化
コンポーネント、アイコンセット、静的アセットに入れる前に、SVGのマークアップを整理します。
最適化設定
数値精度2 桁
精度を下げるとさらに軽くできますが、丸めすぎるとパスが歪むことがあります。2または3が扱いやすい既定値です。
元の SVG
プレビューはありません
最適化後
プレビューはありません
出力コード
SVG 最適化の仕組み
描画に関係しないデータを削る
デザインツールから書き出したSVGには、メタデータ、コメント、エディタ用の名前空間、表示されないマークアップが含まれ、見た目は変わらないままサイズだけ増えることがあります。
パスの精度を下げる
10.5432109 のような座標は、アイコンサイズでは 10.54 に丸めても見た目が変わらないことがあります。
公開前に確認する
viewBox、fill、stroke、ARIAラベル、重要なIDは、描画、スタイル、アニメーション、アクセシビリティに影響する場合があります。
よくある質問
最適化した SVG はぼやけますか？
いいえ。SVGはベクター形式なので、通常の最適化でぼやけることはありません。注意点は、パスの値を丸めすぎると形が変わる可能性があることです。
最適化後にファイルサイズが増えることはありますか？
元のファイルが手作業で十分小さい場合、削れる要素が少なく、同程度または少し大きくなることがあります。
複数ファイルの一括最適化に対応していますか？
このページは単一ファイルの確認と調整向けです。複数ファイルをまとめて処理する場合は、ビルド手順の中でSVGOなどを使います。
アニメーションやスタイルが壊れることはありますか？
あります。CSSやJavaScriptが使うID、class、メタデータ、数値精度を変更すると壊れることがあります。操作できるSVGは、プレビューと重要な属性の保持を確認してください。
装飾用 SVG にアクセシビリティラベルは必要ですか？
装飾だけのSVGは支援技術から隠せます。意味のあるアイコンやイラストは、title、label、周辺テキストを残します。