SVG
數位製圖！向量不失真！
優點
- 支援 CSS
- 所以可以設定 class，迅速批次套用樣式（字型啦、顏色啦）到眾多物件！
- 支援 font-family fallback！
- 透過數字，精準定位物件！
Tips
<text> 內換行
每行用一個 <tspan>，x= 都設為 <text> 的 x1，然後設 dy=1.4em 之類的1)
插入超連結
在物件外面包上：<a href="…"> 即可
☞ href - SVG: Scalable Vector Graphics | MDN
舊做法：
<a>用xlink:href- SVG 開頭要宣告
xmlns:xlink="http://www.w3.org/1999/xlink"
編輯器
線上：
- ⭐ Method Draw SVG Editor 好用耶！
- 原始碼編輯模式乾淨，不會亂加多餘 SVG 碼，簡直像是 SVG 界的 bluegriffon 啊啊啊～
- 透過 Fx/Wx 的 GhostText，甚至還可餵到 Sublime Text 進行更方便的編輯！
- 然後我也用瀏覽器的 Stylish 放大了原始碼編輯框的字型、設定更好看的字型
- 圖形介面也還是很方便
- 這樣比 Google Docs 的 Draw 還好用啦！
20201002 不過鑒於它有時候還是有點 bug 亂改原始碼，比方說 有時新增物件卻導致背景圖樣的長寬被改掉；有時只是更動物件位置，原始碼的 attribute 卻通通都被大搬風 ∴今天也搭配檔案比較工具 Sublimerge，另存暫時檔後找到被改壞的部分，再把真正需要改的部分手工更新到檔案裡即可
20201003 或是還有一個方法：同時把 SVG 原始碼直接開 Sublime Text 編輯，同時開一個瀏覽器分頁看 SVG 圖形、inspect 部件，兩相對照，就不必大海撈針，並且改好以後也可以馬上 reload 瀏覽器分頁看效果。以後，在密集製圖階段就用 Method Draw；有雛形以後要用 Git 追蹤版本時，可能就盡量用純文字直接編輯原始碼了
20201009 而且今天還發現，它對
<text>、<tspan>位置的解讀，也與 Firefox 等瀏覽器都不一致，所以對於文字的定位方面，可能也需要多借重瀏覽器了。
- Janvas：很強，更強，但進入門檻高得多
App：
- InkScape：雖然是重量級向量繪圖軟體，但似乎反而不是完整支援 SVG 的語法耶
- Sublime Text 搭配網頁瀏覽器的網頁工具箱