Astro 的 SVG 元件

這篇文章要介紹的是 Astro v5 的其中一個新功能，在 Astro import SVG 的新方法：SVG 元件。

以前的方法

原本在 Astro 並沒有辦法直接 import SVG 圖片。要 import SVG 圖片大概有兩種方法：

import 成字串再塞進去 set:html directive：

---
import logo from "./logo.svg?raw";
---

<Fragment set:html={logo} />

或者是用 <Image> 元件：

---
import { Image } from "astro:assets";
import logo from "./logo.svg";
---

<Image src={logo} alt="logo" />

但是這兩種方法都無法設定 SVG 圖片的樣式。前者產生的 <svg> 元素我們沒有辦法加屬性，如果要為它設定樣式的話只能另外用 CSS 樣式表以比較迂迴的方式設定。至於後者產生的是 <img> 元素，所以不能設定 SVG 的樣式。

在 Astro v5 新增了內建的 SVG 元件，要使用需要在 Astro 的設定檔加上：

// ...
export default defineConfig({
  // ...
  experimental: {
    svg: true
  }
});

只要 import 一個 SVG 檔案，就可以當做 Astro 元件使用：

---
import Logo from "./logo.svg";
---

<Logo />

好處除了寫起來比較簡單直覺之外，還解決了上面提到的問題，可以設定 SVG 圖片的樣式了。

---
import Logo from "./logo.svg";
---

<Logo style="stroke: blue; fill: blue;" />

在 v5.0.0-beta.9 這個功能第一次發佈的時候，我就先測試了一下。結果發現放樹狀圖會報錯誤，我另外找了一個摺紙龍的圖一樣無法正常顯示，所以我就發了一個 issue。

感謝開發這個功能的 stramel 進行 debug。他發現 SVG 裡面如果最上層不是只有 <svg> 元素的話就會出錯。這兩張圖片的共同點就是都有 XML 宣告：

<?xml version="1.0" encoding="utf-8"?>

這個宣告在 SVG 檔案中似乎不罕見。他的程式碼沒有考慮到這種情況，所以就出錯了。

這個 bug 已經在 v5.0.0-beta.11 修好了，所以不會再出現這個錯誤。這一段只是記錄搶先體驗新功能遇到的 bug。