SVGファイルの最適化は、ウェブサイトのパフォーマンス向上に重要です。しかし、SVGアニメーションを使用している場合、不適切な最適化設定によってアニメーションが機能しなくなる可能性があります。今回は、SVGアニメーションを損なわずにファイルサイズを削減するための「SVG Cleaner」の設定について解説します。

なぜSVG Cleanerなのか？

ImageOptimなどの一般的な画像最適化ツールは、SVGファイルの最適化にも使用できますが、アニメーションやインタラクティブな要素を含むSVGファイルには適していない場合があります。SVG Cleanerは、SVG固有の最適化オプションを提供し、アニメーションを保持しながら効果的に最適化できます。

推奨設定

以下の設定は、SVGアニメーションを損なわずにファイルサイズを削減することを目的としています。

Main（メイン設定）

• Saving method（保存方法）:
• ☐save the output folder （出力フォルダにクリーンアップされたファイルを保存）
• ☐save the current folder（現在のフォルダにクリーンアップされたファイルを保存）
• ☑overwrite（元のファイルを上書き）

• Parallel jobs（並行処理数）: [8]

• ☐Multipass
• ☐Allow bigger files
• ☐Copy on error

• ☑gzip圧縮:
  • 圧縮プログラム: [7-Zip]
  • 圧縮レベル: [Ultra]
  • ☑Only for already compressed files（既に圧縮されたファイルのみに適用）

• ☑Check updates（アップデートチェック）

Elements（要素）

• ☑Remove XML comments（XMLコメントを削除）
• ☑Remove XML declarations（XML宣言を削除）
• ☑Remove non-SVG elements（非SVG要素を削除）
• ☐Remove unused referenced elements（未使用の参照要素を削除）
• ☑Convert basic shapes into paths（基本形状をパスに変換）

• Remove invisible elements（見えない要素を削除）:
  • ☑title
  • ☑desc
  • ☑metadata

• Remove duplicated elements（重複要素を削除）:
  • ☑linearGradient
  • ☑radialGradient
  • ☑fe GaussianBlur

• ☐Ungroup groups（グループの解除）
• ☑Ungroup 'defs' element（'defs'要素の解除）
• ☐Group elements by equal styles（同じスタイルの要素をグループ化）
• ☐Merge gradients（グラデーションの統合）
• ☐Regroup gradient 'stop' elements（グラデーションの'stop'要素の再グループ化）
• ☑Remove invalid 'stop' elements（無効な'stop'要素を削除）

Attributes（属性）

• ☑Remove 'version' and 'baseProfile' attributes（'version'および'baseProfile'属性を削除）
• ☑Remove non-SVG attributes（非SVG属性を削除）
• ☐Remove unreferenced 'id' attributes（参照されていない'id'属性を削除）
• ☐Trim 'id' attributes（'id'属性のトリミング）
• ☑Remove text-related attributes if there is no text（テキストがない場合、テキスト関連の属性を削除）
• ☑Remove unused coordinate attributes（未使用の座標属性を削除）
• ☑Remove attributes with default values（デフォルト値を持つ属性を削除）
• ☑Remove an unused 'xmlns:xlink' attribute（未使用の'xmlns:xlink'属性を削除）
• ☑Remove attributes that doesn't belong to this element（この要素に属していない属性を削除）
• ☐Remove inheritable gradient attributes（継承可能なグラデーション属性を削除）

• Join presentational attributes（提示属性の結合）: [Some]

• Apply transformations to（変形の適用）:
  • ☑gradients
  • ☐shapes

• ☐Remove unresolved classes from 'class' attributes（解決されていない'class'属性を削除）

Paths（パス）

• ☑Convert path segments into relative ones（パスセグメントを相対値に変換）
  • ☐Remove unused path segments（未使用のパスセグメントを削除）
  • ☐Convert path segments into shorter ones（パスセグメントを短縮）
  • ☐Apply transformations to paths（パスへの変形の適用）

• ☑Use compact notation for paths（パスのコンパクト表記を使用）
  • ☐Join ArcTo flags（ArcToフラグの結合）

• ☑Remove subsequent segments commands from paths（パスから続くセグメントコマンドを削除）
• ☑Use implicit LineTo commands（暗黙のLineToコマンドを使用）

Output（出力）

• ☑Use #RGB notation（#RGB表記の使用）
• ☐Simplify transform matrices（変換行列の簡略化）

• Numeric precision（数値の精度）:
  • coordinates: [6]
  • properties: [6]
  • transforms: [8]
  • path's coordinates: [8]

• Number list separator（数値リストのセパレータ）: [Space]
• Indention（インデント）: [None]

注意点

1. IDとクラスの保持：
   アニメーションやスクリプトで要素を特定するために使用されるため、削除しないようにします。
2. グループの保持：
   グループ構造はアニメーションや相互作用のロジックに影響を与える可能性があるため、解除しません。
3. 変形の適用：
   shapes への変形の適用は避けます。これにより、アニメーションへの影響を最小限に抑えます。
4. パスの変換：
   相対値への変換とコンパクトな表記は使用しますが、セグメントの削除や短縮は行いません。
5. 数値の精度：
   デフォルト設定で問題ない場合が多いですが、より精密なアニメーションが必要な場合は値を増やすことを検討してください。
6. 変換行列の簡略化：
   複雑な変換を使用している場合があるため、無効にします。

まとめ

これらの設定により、SVGファイルのサイズを最適化しつつ、アニメーションや操作性を保持することができます。ただし、具体的なSVGファイルやアニメーションの複雑さによって最適な設定が異なる場合があるため、重要なファイルについては処理後の動作を必ず確認することをお勧めします。

SVG Cleanerを使用することで、ImageOptimなどの一般的なツールよりも細かな制御が可能になり、アニメーションSVGの最適化により適した結果を得ることができます。