要不要升級到 SVG 平面圖？誠實的比較（以及什麼時候不需要）

charles

做到上一篇，你的平面圖已經：

• 會亮燈、可以點、有漸變動畫
  
• 有溫度濕度、有異常提示
  

那還需要 SVG 嗎？

這篇誠實講。



SVG 到底好在哪

好處一：房間可以「真的」變色，不用做圖層檔案

Picture Elements 的做法：每個房間要做一張「亮燈」的 PNG。
六個房間就是六個檔案，改顏色要重做。

SVG 的做法：房間本身就是一個可以改顏色的圖形。

1. /* 燈關著 */
2. #light\.living_room { fill: #F4F6FA; transition: fill 0.8s; }
4. /* 燈開著 */
5. #light\.living_room.light-on { fill: #FFD54F; }

複製代碼

改個顏色碼就好，不用開圖片編輯器。

好處二：漸層顏色（這個 Picture Elements 做不到）

房間顏色隨溫度連續變化 ——
20 度是藍的、25 度是綠的、30 度是紅的，而且是平滑過渡。

用 PNG 圖層的話，你要準備幾十張圖。

好處三：位置絕對精準

SVG 裡的每個元素就在它該在的地方，
不用猜百分比座標。

畫的時候房間在哪，顯示的時候就在哪。

好處四：動畫可以作用在「形狀」上

• 門可以真的轉開（旋轉那個門片的形狀）
  
• 窗簾可以真的拉開
  
• 燈可以發光暈（SVG 的濾鏡）
  
• 水管可以有流動效果
  

好處五：檔案很小

一張 SVG 平面圖大概 20-80 KB，
而同樣的 PNG 加上六張圖層可能要 800 KB。



代價是什麼（這段要看清楚）

代價一：要會用 Inkscape

不難，但要花一個晚上熟悉。

代價二：要裝 HACS 外掛

ha-floorplan 是社群維護的。

• HA 大版本更新可能會壞掉
  
• 要自己盯著更新
  
• Picture Elements 是官方內建的，永遠不會壞
  

代價三：除錯比較難

Picture Elements 出問題，你看 YAML 就知道。

SVG 出問題可能是：

• 元素 id 打錯
  
• SVG 裡有多餘的 transform
  
• CSS 選擇器寫錯
  
• 群組把元素包起來了
  

而且錯誤訊息通常不明顯。

代價四：改一個小東西要重新匯出

想把某個房間的圖示往左移一點？

• Picture Elements → 改一個數字，按儲存
  
• SVG → 開 Inkscape、找到元素、移動、另存、上傳、清快取
  

日常微調的成本高很多。

誠實的建議



你「不需要」SVG，如果：

• 你只是想看哪些燈開著、點一下開關
  
• 你的房間數不超過八個
  
• 你不想維護 HACS 外掛
  
• 你不打算花時間學 Inkscape
  
• 現在這個版本家人已經在用了
  

老實說，這涵蓋了九成的人。

你「值得」升級到 SVG，如果：

• 你想要房間顏色隨溫度連續變化
  
• 你想要門真的會轉開、窗簾真的會拉
  
• 你有很多房間（十個以上），管理圖層檔案很煩
  
• 你享受這個過程（這是最正當的理由）
  
• 你要放在牆上的平板或電視上，質感很重要
  

一個折衷方案：兩個都留著

我自己的做法：

• 手機上用 Picture Elements 版本 —— 簡單、可靠、圖示大好點
  
• 平板和電視用 SVG 版本 —— 好看、動畫豐富
  

兩個是不同的儀表板頁面，用媒體查詢或不同的儀表板區分。

這樣手機端永遠不會因為 HACS 外掛壞掉而掛掉。

另一個選擇：floorplan-card

除了 ha-floorplan 之外，還有一個叫 floorplan-card 的專案，
概念類似但工作流程不同。

• 一樣用 Inkscape 畫 SVG
  
• 一樣把元素的 id 設成實體 ID
  
• 設定方式比較接近一般的 Lovelace 卡片
  

兩個都可以，我這個系列後面會用 ha-floorplan，
因為它的文件和範例比較多。



決定要做的話，先準備這些

一、先把 Picture Elements 版本留著

不要刪掉。

SVG 版本做到一半卡住的時候，
你至少還有一個能用的版本。

二、把實體 ID 整理好

SVG 裡的元素 id 就是實體 ID。

如果你之後要改實體 ID，SVG 也要跟著改（而且要重新匯出）。

所以一定要先整理好再開始畫。

三、安裝 Inkscape

inkscape.org，免費。

四、預留兩個晚上

• 第一晚：熟悉 Inkscape、畫出房間
  
• 第二晚：設定 id、裝 ha-floorplan、接上第一個實體
  

不要期待一個小時搞定。

一個心理準備

SVG 版本的第一次一定會不順。

常見的卡關點：

• 元素明明有 id 但點了沒反應
  
• 動畫跑掉（元素飛到畫面外）
  
• 圖片顯示不出來
  
• CSS 改了沒效果
  

這些後面幾篇都會講怎麼解。

但你要有心理準備：這不是「跟著做十分鐘就成功」的東西。

---

下一篇：用 Inkscape 畫可以動的 SVG 平面圖。

從開啟 Inkscape 開始，一步一步來。