SVGコードを最適化・整理する方法
実用的なコツ
デザインソフトが書き出すSVGには余分なコード（メタデータ、コメント、長い小数、不要なグループ）が含まれがちです。整理すると容量が減り、読み込みが速くなり、編集も楽になります。
SVGで余りがちなもの
- メタデータとコメント：元エディタのタグ（Illustrator, Inkscape）。
- 過剰な小数：
12.0000001のような座標は切り詰められる。 - 既定の属性：すでに既定値のもの。
- 空のグループやレイヤー：中身のない
<g>。 - 未使用のIDやクラス。
コードを手で確認
svgdeskのSVGコードパネルは実際の内容を表示しリアルタイム同期します。余分なタグを確認し、メタデータを削除したり属性を簡略化して、画像が変わらないことを即座に確認できます。
小数を減らす
小数が多い座標は見た目の精度を上げずに容量を増やします。1〜2桁への丸めで十分なことが多いです。svgdeskでノードを編集すると座標は丸めて生成されます。
図形を簡略化
ノードが少ない＝軽いコード。余分なノードは削除（選択して Del）。必要に応じてプリミティブを変換し、線の重複を避けます。
短い色指定を使う
可能なら長い rgb() より3桁/6桁の16進数（#fff, #6c8cff）を優先します。
最後のベストプラクティス
- 明確な
viewBoxを定義し、拡縮させたいなら固定のwidth/heightを避ける。 - 不要な変形は座標に適用して取り除く。
- 最適化前に元のコピーを保存する。