SVG?性能優化：循序漸進 4?步法

目標：先減負 → 再復用 → 后加速 → 最后按場景微調

---

①?精簡—把包袱先丟掉

1. 刪除無用元素
   • 隱藏/被遮擋的 <path>、未引用的 <defs> 里漸變、濾鏡。
2. 合并路徑
   • 同填充色或描邊的路徑 ? SVGO / SVGOMG「Merge paths」。
3. 轉模板復用
   • 把可復用圖形放進 <symbol viewBox="…">，實例用 <use href="#id">。

---

②?復用—同一份資源多次用

做法	作用	提示
<symbol>?+?<use>	只渲染一次，內存輕	SVG2 用 href，別再寫 xlink:href
外鏈 SVG spritemap	瀏覽器可緩存	<use href="sprite.svg#icon-star">
CSS?currentColor	主題換色 0 成本	圖標自動跟隨字體色

---

③?加速—動畫與渲染

• 動畫只動“transform / opacity”

  @keyframes float {to {transform: translateY(-10px)}}
  svg g.bubble {will-change: transform; animation: float 2s infinite;}
  

• 避免幀改 <path d>：手寫效果用 stroke-dashoffset。
• 開啟合成層：will-change 或在第一次動畫前 transform: translateZ(0) 觸發 GPU。

---

④?微調—針對大文件 / 低端機

場景	優化點
文件?>?30?KB	<img loading="lazy">（Chrome/Edge/Opera）+ decoding="async"
復雜濾鏡	預烘焙成 PNG / WebGL
大圖當背景	preserveAspectRatio="xMidYMid slice"，保證填充不變形
子像素鋸齒	保持默認抗鋸齒，勿強設 shape-rendering="crispEdges"

---

📌?記憶口訣

“刪冗余 → 設模板 → 變形動 → 按需載”
遵循這四步，復雜 SVG 也能在移動端輕松跑滿 60?fps。