建立 2026-09-14 更新 2026-09-14

把 SVG 放到網頁

同一份 SVG，嵌入方式不同，能不能改顏色、加動畫、讀內部元素也不一樣。教材圖與可互動圖示用 inline；單純當圖片用 <img>。

Inline（內嵌，最常用於教學與動畫）

把 <svg> 直接寫進 HTML。CSS 可以選內部元素，JavaScript 也能改屬性。

<svg width="120" height="80" viewBox="0 0 120 80" aria-hidden="true">
  <rect width="120" height="80" fill="#4051b5"/>
</svg>

代價是 HTML 變長，同一圖示出現多次時應改用 <symbol> + <use>。

<img src="chart.svg" alt="保險怎麼保？風險示意圖" width="600" height="400">

瀏覽器把它當圖片：無法用頁面 CSS 改內部 fill，也無法對內部節點加事件。適合靜態插圖、不會改色的 logo。

<object type="image/svg+xml" data="chart.svg" width="600" height="400">
  無法顯示 SVG 時的後備文字
</object>

外部 SVG 仍是獨立文件，可用腳本與內部樣式，但和父頁 CSS 隔離。權限與快取行為比 inline 複雜，本站教材圖不優先用這個。

.icon {
  background: url("icon.svg") center / contain no-repeat;
}

和 <img> 一樣改不到內部形狀。單色圖示若要隨主題變色，優先 inline 或 mask。

無障礙

有資訊的圖給 alt 或 <title>；純裝飾用 aria-hidden="true"。標題文字若已在旁邊的 HTML 出現，就不要在 SVG 裡再唸一次。