當你的專案需要一個平滑、有機的形狀，而且能夠在任何尺寸下都清晰地縮放、可以被儲存成一個小型的文字檔，並且能夠從少數幾個數字重新產生時，你就應該產生一個 SVG 斑塊。斑塊是裝飾性的圓滑幾何圖形——由幾個頂點和二次曲線構成的封閉外輪廓——當你想要快速取得這種形狀、不想手動繪製貝茲曲線路徑時，使用像 SVG 斑塊產生器這樣的專用產生器就很合理。當輪廓作為背景點綴、 avatar 遮罩、波浪分隔線，或文字後方的柔和視覺點綴時，而且設計只需要單一實心填色時，它就是合適的工具。當你需要漸層填色、描邊、動畫、精確的數學外輪廓，或一個必須符合品牌間距規範的標誌時，它就是不適合的工具。這個決定多半取決於一個簡單、可重現的單色向量形狀是否符合你眼前的工作，而本文接下來會帶你逐一檢視那些指向其中一方的訊號。
什麼時候產生 SVG 斑塊是正確的選擇
產生的 SVG 斑塊解決一個特定的問題：你需要圓滑、有機的幾何圖形，看起來不同於完美的圓形、方形或多邊形，但又不想手動撰寫貝茲曲線的數學運算。一開始就辨識出正確的情境，可以讓後續的工作流程更簡短。
首先，這個形狀是裝飾性的，而非功能性的。背景區塊、主視覺點綴、內容區塊之間的波浪分隔線、文字後方邊緣柔和的卡片，以及用於佔位使用者圖片的 avatar 遮罩，都能從單一平滑曲線的輪廓中受益，因為它不會搶走上方內容的焦點。
其次，這個形狀需要能夠縮放。因為檔案是向量格式，同一個 SVG 在 64 像素或 1600 像素下都能清晰呈現。這對響應式版面、視網膜螢幕和列印輸出都很重要。點陣圖的替代方案會迫使你提供多種解析度，而且在最大尺寸下仍會出現鋸齒邊緣。
第三，你希望這個形狀能夠被重現。一個由種子、頂點數、不規則值、畫布大小和填色所構成的產生式斑塊，之後可以完全重新產生。當設計師與開發人員共用一份設計簡報、當一個樣板需要在許多頁面中呈現相同外觀，或當你想要在數個月後重新取用同一個形狀時，這一點非常實用。
第四，你不需要內建豐富的 SVG 功能。這個產生器刻意只產生最精簡的內容：單一 path、單一實心填色、一個可存取的圖片標籤，以及一個 viewBox。如果這樣就足夠——而這種情況其實很常見——你就能省下之後移除未使用功能的工作。
什麼時候斑塊產生器是不適合的選擇
在某些情況下，產生的斑塊並不合用，及早辨識出這些情況可以避免徒勞無功。
如果你的設計需要直接套用在形狀上的漸層、多重填色、描邊、陰影或裁切路徑，產生器並不會幫你加上這些。它只輸出一個六位數的 HEX 填色和單一 path。你可以在向量編輯器或 CSS 中分層套用這些效果，但它們不會內含在這個工具所產生的檔案中。
如果你需要動畫，產生器的輸出並不包含 SMIL 或 CSS 動畫。任何動態效果都必須在匯出之後另行加入。
如果這個形狀是功能性的而非裝飾性的——例如，精確的地理輪廓、生物學插圖、有品牌間距規範的標誌，或任何必須逐像素符合規格的形狀——那麼斑塊產生器就是不適合的幾何來源。裝飾性的隨機性與確定性的精確度是不同的目標。
如果你想要的是圓形、橢圓或簡單的多邊形，斑塊就太殺雞用牛刀了。使用 CSS、內嵌的 SVG 圓形，或 div 上的 border-radius 會更輕量且更可預測。
如果已知目的地會移除內嵌 SVG 或資料 URL——某些電子郵件用戶端和內容過濾器就會這麼做——請在實際採用前先確認，因為匯出的是真正的 SVG 文字，而下載的是一個資料 URL。
這個工具的控制項，以淺白的方式說明
這個產生器的設計刻意保持精簡。四個輸入決定了輸出的所有屬性，而顯示的種子則在這些輸入範圍內決定具體的形狀。
| 控制項 | 可接受範圍 | 對輸出的影響 |
|---|---|---|
| 頂點數 | 3 到 12（整數） | 頂點越多，凸起越多，輪廓也越細緻 |
| 不規則性 | 0 到 100 | 0 百分比會讓形狀趨近於圓形；較高的數值允許更大的半徑變化 |
| 畫布大小 | 128 到 1024 px（正方形） | 同時設定 SVG 的寬度、高度和 viewBox |
| 填色 | 六位數 HEX 顏色 | 單一實心填色，沒有漸層、描邊或透明度圖層 |
| 種子 | 無符號 32 位元值 | 決定性的半徑變化；相同的種子加上相同的設定會產生相同的點和路徑資料 |
「隨機化形狀」只會在按鈕被按下時，才會向瀏覽器的密碼學隨機來源請求新的種子。在頁面渲染期間並不會呼叫隨機功能，因此水合作用和無關的重新渲染都不會在背後悄悄改變圖形。
無效的值會被純粹的產生器拒絕，而不會在使用者不知情的情況下被悄悄限制在範圍內。瀏覽器的色彩選擇器在正常互動下會提供有效的 HEX 值，這讓一般使用情境下的規則保持簡明易懂。
如何產生你所選的 SVG 斑塊
- 在瀏覽器中開啟 SVG 斑塊產生器。不需要帳號或上傳，也不會有任何資料離開這個頁面。
- 使用螢幕上的控制項設定頂點數、不規則性、畫布大小和填色顏色。當你變更每一項時，可以即時觀察預覽的更新。
- 視需要反覆按下「隨機化形狀」。每次按下時，會向瀏覽器的密碼學來源請求新的種子，並以相同的頂點幾何搭配新的半徑變化重新建立預覽。當你看到一個符合版面的形狀時，就可以停下來。
- 把預覽下方顯示的種子記下來，連同你的四項設定一起記錄。這五個值就是你日後重現這個完全相同形狀所需要的全部資訊。
- 使用「複製 SVG」將完整的標記寫入剪貼簿，或使用「下載 SVG」來儲存一個檔名中含有種子的檔案。如果剪貼簿權限被拒絕，相同的標記仍會以唯讀文字區域的形式顯示，你可以手動選取並複製。
- 將 SVG 貼上或開啟到目標應用程式中，並驗證它能如預期般渲染。
在最終目的地中測試結果
產生斑塊只是工作的一半。另一半則是要確認它在實際使用的環境中能正常運作。
在目標瀏覽器、設計工具、電子郵件用戶端或內容管理系統中開啟匯出的 SVG。某些內容過濾器會移除內嵌 SVG 或阻擋資料 URL，即使標記本身是有效的，而這種行為並非產生器所能控制。
如果斑塊位於文字的後方，請檢查所選的填色與上方文字之間的實際對比。一個單獨看起來平衡的斑塊，如果填色太深或太鮮豔，可能會吃掉標題。像 色彩對比檢查工具這類工具，可以幫助你挑選在斑塊實際填色下仍然清晰可讀的前景色。
在心裡把預覽區域調整為這個形狀在實際成品中會出現的最小尺寸。較高的不規則值可能會產生緊密的彎折或視覺比重失衡，在大尺寸下看起來還不錯，但會讓小尺寸的 avatar 顯得擁擠。在採用前，請同時在這兩種尺寸下檢視。
請確認這個形狀在頁面背景上的表現，而不是只看它自己的預覽方塊。融入頁面背景的斑塊會消失；與周圍顏色衝突的斑塊則會干擾整個版面。
儲存設定，以便日後重現
這個產生器不會儲存任何專案。你唯一可攜帶的紀錄，就是種子、頂點數、不規則性、大小和顏色的組合。請把這五個值當作色票或 CSS 變數來看待——它們屬於設計系統的一部分。
把種子寫在形狀用途的簡短說明旁邊。把它和你的其他視覺權杖一起存放在設計規格、樣式指南註解或試算表中。任何擁有這五個值的人，都能隨時重新建立出一模一樣的斑塊。
關於更深層的重現習慣——該記錄哪些內容、如何標示，以及之後手動編輯標記時如何使用種子——透過儲存種子，日後重現同一個 SVG 斑塊 以更多的細節說明了相同的原則。
路徑資料是由一個帶有種子的模型所產生，所以相同的五個值永遠會產生相同的點、相同的路徑字串和相同的 SVG 標記。座標值在序列化時會四捨五入到小數點後兩位，這讓檔案保持可讀的同時，也為這個工具所支援的畫布大小保留了充分的精確度。至於 SVG path 語法中 move、quadratic curve 和 close-path 指令的背後原理，W3C SVG 2 Paths 規範以及 MDN SVG path 參考文件 記載了相關的底層序列化規則。