記錄產生 SVG 形狀（blob）所執行的步驟，意味著寫下你實際餵給產生器的輸入值——頂點數、不規則度、畫布大小、填色，以及顯示的種子——連同輸出的標記內容，如此一來，只要擁有相同的筆記，任何人都能在之後重建出同一個有機形狀。SVG 形狀產生器正是圍繞這個理念打造：相同的頂點、不規則度、大小、顏色，以及無號 32 位元種子，必定會產生相同的路徑資料、相同到小數點後兩位四捨五入的座標，以及同一份單一路徑的 SVG 檔案。正是這種確定性，讓書面紀錄具有價值。少了種子，你的筆記只能描述一類相似的形狀，卻無法鎖定其中一個；有了種子，你的筆記就能精準指向一個特定的形狀。本文將依序說明該記錄哪些內容、按照什麼順序記錄，以及如何驗證這份紀錄確實能重現你預期的形狀。
文件化之所以重要，是因為這個形狀既不是一個具名形狀，也不是 CSS 原生元素或現成圖庫素材。它是根據一小組明確的控制項所產生的裝飾性幾何圖形，而要重現它的唯一方式，就是把這些控制項記錄下來。這個工具不會在伺服器端儲存任何資料，所以紀錄就放在你選擇的地方——程式碼註解、設計檔案的註記、試算表、操作手冊，或 pull request 的內文中。請把這份紀錄視為該形狀的唯一真實來源，並把下載的 SVG 當作可從紀錄重新衍生的檢查點。
為什麼這個產生器讓文件化變得可行
這個文件化的問題之所以可解，關鍵在於它採用了帶種子、可重現的設計。這個工具從畫布中心周圍等距分布的角度頂點出發，使用無號 32 位元的種子產生器為每個頂點指派不同的半徑，然後用二次貝茲曲線指令依序連接各個中點，產生一條連續圓滑的外輪廓。產出結果會以六位數的 HEX 填色來序列化，數值四捨五入到小數點後兩位，並封裝成 SVG 元素內的一條單一路徑，同時附上明確的 width、height、相符的 viewBox，以及可供無障礙使用的圖片標籤。每一個設計選擇都是穩定的：以相同的輸入重新執行產生器，必定會得到相同的位元組輸出。路徑語法本身定義於 W3C SVG 2 路徑規範，而 MDN 的 SVG path 元素頁面也確認了產生器所輸出的移動、二次曲線與閉合路徑指令。
有兩個行為值得單獨記錄。第一，「Randomize Shape」（隨機產生形狀）按鈕只會改變種子，並不會動到你的頂點數、不規則度、畫布大小或顏色。瀏覽器的密碼學隨機來源只有在按鈕被按下時才會提供新的種子，而且 React 渲染過程中並不會呼叫隨機功能，因此無關的重新渲染不會悄悄改變圖形。第二，無效的輸入會被純粹的產生器直接拒絕，而不會在背後悄悄被箝制。這代表如果記錄下來的設定無法重現該形狀，問題出在紀錄本身，而不是工具偷偷改寫了你的輸入。
產生器允許你控制的項目
控制項的設計刻意保持精簡。它定義的是一個專注的形狀產生器，而非完整的向量編輯器，下表所列的範圍就是所有有效的輸入集合。如果你的紀錄要能重現該形狀，這些項目每一項都必須被記錄下來。
| 輸入 | 類型 | 接受範圍 | 紀錄時的注意事項 |
|---|---|---|---|
| 頂點數 | 整數 | 3 到 12 | 較高的數值會為輪廓增加細節，但不會提高匯出座標的精度。 |
| 不規則度 | 整數百分比 | 0 到 100 | 0 會讓每個頂點擁有相同的半徑；較高的數值允許在半徑上產生變化，同時讓頂點維持在畫布邊界內。 |
| 畫布大小 | 整數（px） | 產生器支援 128 到 1024；介面另外提供三組實用的預設值 | 頁面上的預覽僅受限於版面配置——它並不會取代你所要求的尺寸。 |
| 填色 | 六位數 HEX | 嚴格的六位數格式 | 正常操作時，瀏覽器的顏色選擇器只會提供有效的值；產生器會拒絕任何不符的輸入。 |
| 種子 | 無號 32 位元整數 | 顯示在結果下方 | 這項才是真正鎖定形狀的關鍵。少了它，紀錄只能描述一類形狀，而非單一形狀。 |
記錄你用來產生 SVG 形狀（blob）的步驟
順序很重要。先開啟產生器，確定好設計，記下種子，再匯出——然後才寫下紀錄。打亂這些步驟，正是紀錄與它所描述的形狀逐漸脫鉤的原因。
- 開啟產生器並設定四項穩定的輸入。從 3 到 12 之間選擇一個頂點數，將不規則度設在 0 到 100 之間，從 128 到 1024 像素之間挑選畫布大小（或使用介面提供的三組預設大小之一），並以六位數 HEX 指定填色。這四項在你按下隨機化按鈕時都不會改變，而這正是你想要的——它們定義了種子可以從中挑選的形狀家族。
- 反覆按下 Randomize Shape，直到預覽符合你的設計，再讀取顯示的種子。每次點擊都會向瀏覽器的密碼學隨機來源要求一個新的無號 32 位元種子，並以該種子套用到你固定的輸入上重新渲染預覽。看到想保留的形狀就停止點擊，然後從結果正下方的文字行複製種子數字。這是文件化是否能確實鎖定、或悄悄失敗的關鍵時刻。
- 複製 SVG 標記或下載檔案。「Copy SVG」會把完整的標記寫到剪貼簿；萬一瀏覽器拒絕授權，相同的標記仍會顯示在一個唯讀的文字區域中，你可以手動選取並複製。「Download SVG」則會將獨立 .svg 檔案以 data URL 的形式儲存，且檔名內嵌種子，這在日後面對一整批相似的形狀檔案時，是相當實用的內建自我檢查機制。
- 在實際使用環境中測試檔案。把儲存的 SVG 開啟在它真正會被放置的編輯器、瀏覽器、電子郵件用戶端或內容管理系統中。內嵌 SVG 與 data URL 有時會被淨化器（sanitizer）過濾掉，所以在產生器頁面上看起來正確的檔案，到了實際環境仍可能失敗。請把這項測試視為紀錄的一部分，而非額外的可選步驟。
- 寫下紀錄。記錄四項穩定的輸入、種子、檔名、目的地、日期或版本，以及目的地測試的結果。請將紀錄與 SVG 放在同一處，避免放在另一個系統中導致日漸脫鉤。
具體應該記錄哪些內容
一份紀錄是否有用，取決於隊友——或未來的你——能否毫無臆測地從中重建該形狀。一份最低限度的可用紀錄包含六個欄位，每個欄位都對應到產生器所提供的一個控制項。頂點數以整數記錄。不規則度以整數百分比記錄。畫布大小以整數像素記錄。填色以六位數 HEX 記錄——若要與產生器嚴格的格式保持一致，可省略前面的井字號；若團隊偏好 CSS 風格的寫法則保留井字號——選定一種並始終一致。種子必須逐字記錄，包含產生器所顯示的任意前置零，因為種子是無號 32 位元整數，即使只調換一個數字也會產生完全不同的形狀。最後，檔名要照儲存時的樣子記錄，包含其中內嵌的種子，這樣未來的讀者才能確認資料夾中的檔案與紀錄描述的是同一個。
除了這六個欄位之外，再多加幾項能讓紀錄更為可靠。註明 SVG 將放置的位置（網頁、電子郵件標頭、應用程式背景、簡報投影片）。註明檔案是否通過步驟四所描述的目的地測試；若未通過，記下淨化器改了什麼，避免下個人浪費一小時重新踩同樣的坑。註明在向量編輯器中所做的任何後續處理——漸層、描邊、陰影、裁切、動畫——因為產生器刻意不會加上這些，紀錄應該清楚標示哪些屬性來自工具、哪些來自後續編輯。「產生 SVG 形狀後如何檢查結果」指南更深入地涵蓋了目的地測試步驟，是這份紀錄的天然搭配。
驗證紀錄能重現該形狀
有文件化的工作流程只有經過測試才可信。再次開啟產生器，清除目前的所有設定，然後依照紀錄原樣輸入頂點數、不規則度、大小、顏色與種子。預覽結果應該與原本匯出的 SVG 在小數點後兩位的座標精度上完全一致，這正是產生器序列化路徑時所採用的四捨五入方式。若結果不符，最常見的原因包括：HEX 顏色打錯（漏字元、大小寫錯誤、不慎在錯誤的欄位加上了井字號）、頂點數被寫成了文字而非整數，或種子在抄寫時漏掉或多了一個數字。這些問題產生器本身都無法診斷，因為它只會拒絕無效值而不會默默箝制——這對可重現性而言是正確的行為，但也代表錯字會以「產生不同形狀」的方式呈現，而非友善的錯誤訊息。
當預覽結果相符時，再次於目的地開啟匯出的檔案，確認淨化結果與原本測試時相同。如果你只在目的地發現不一致，紀錄仍然有用——變動的是發布環境，而非 SVG 本身——但請把新的發現註記在原本測試旁邊，讓下個讀者能夠一目了然。
當文件化不只是關於圖片本身
文件化同時也是一種交接。如果這個形狀將由從未打開過產生器的人使用，紀錄就是他們得到一致結果的唯一途徑。請把紀錄、SVG 檔案，以及一行簡短的註記（指出哪個欄位是種子，因為種子是最容易被略過或不小心更動的欄位）一起交給他們。如果目的地無法接受該 SVG，紀錄應該包含一條備註說明替代方案——例如在被剝除內嵌 SVG 的系統中改用點陣化的預覽圖，或在可接受 data URL 的系統中使用儲存的 data URL。如此一來，紀錄就成為該形狀的契約，不論它最終落在哪裡。
最後一項檢查其實也是一種習慣。請把每個出貨的形狀都視為由紀錄驅動的產物：在發布前依紀錄重新產生，而不是只看檔案。如果重新產生得到不同的形狀，代表紀錄本身就有誤——這是一個你寧可早於讀者之前就發現的問題。
若想更深入了解，請參閱「如何判斷你是否需要產生 SVG 圖樣」。