SVG Blob Generator 將四個明確的設定——頂點數、不規則百分比、畫布大小與填色——轉換成單一可重現的有機 SVG 路徑，讓你一鍵複製或下載。開啟 SVG Blob Generator，你會看到一個方形預覽、四個有標籤的輸入欄、一個 Randomize Shape 按鈕、一個 Copy SVG 動作、一個 Download SVG 連結，以及顯示在結果下方的數字種子。頁面上的每個動作都會重新寫出同一段 SVG 字串:預覽、剪貼簿文字與下載檔案全都來自同一份記憶體中的文件。不會上傳任何資料、不需要帳號，也沒有伺服器端的繪圖服務負責渲染形狀——瀏覽器會以一個確定性的演算法處理所有事情。對第一次造訪的使用者來說，工作就是了解這四個控制項各自的作用，反覆點擊 Randomize Shape 直到你喜歡輪廓，記下種子，然後把標記帶到需要的地方。
SVG Blob Generator 為你建立了什麼
這個產生器是一個專注的形狀工具，而不是向量編輯器。它接受一組少量的整數或百分比值，在畫布中心以等角間隔分布頂點，透過一個種子化的隨機來源改變每個頂點的半徑，再用二次貝茲曲線連接相鄰頂點對的中點。最終結果是一條連續平滑的輪廓，由一串 path 指令構成，搭配明確的寬度與高度、對應的 viewBox、可存取的影像標籤，以及一個六位數的 HEX 填色。這個工具刻意不加入漸變、筆畫、陰影、裁切路徑、動畫、CSS class 或中繼資料，因為這些圖層在輪廓確定後，很容易在真正的編輯器中再補上。
頁面會在每次輸入變更時重新建立 SVG 字串，因此預覽永遠是即時的，絕對不會落後於過時的縮圖。頁面上的預覽只受到版面配置的限制，所以你在 CSS 中看到的尺寸與匯出標記裡固化的寬高並不相同——檔案仍然會帶著你要求的畫布大小，以便在任何遵循 viewBox 幾何的目標環境中使用。
四個控制項導覽
初學者常常會預期這是個帶有控制點和圖層的向量編輯器。SVG Blob Generator 用一個小巧、可預測的輸入集合取代了那些面面。這四個控制項直接對應到文件化的限制，當輸入無效值時，頁面會直接拒絕，而不是默默夾緊，因此輸出的路徑完全就是你要求的路徑。
| 控制項 | 可接受的值 | 實際改變的內容 |
|---|---|---|
| 頂點數 | 整數，3 到 12 | 在畫布中心以等角間隔擺放的頂點數 |
| 不規則度 | 整數，0 到 100 (視為百分比) | 每個頂點的半徑相對於基準圓可以偏移的程度 |
| 大小 | 涵蓋 256–1024 px 正方形範圍的三個實用預設 | 同時影響匯出的寬與高，以及對應的 viewBox |
| 填色 | 嚴格的六位數 HEX (例如 #4A90E2) | 檔案中唯一的顏色;刻意不包含透明度、漸變與筆畫 |
在不規則度為零的情況下，每個頂點共用相同的半徑，因此形成平滑的圓形。隨著數值上升，各個頂點會沿著固定的角向內拉或向外推，形成有機的凸瓣與內凹的凹陷，而且永遠不會跨越保守的畫布邊界。頂點只會改變輪廓的細節程度——並不會增加寫入檔案的座標精度。如果想了解這個工具輸出的底層路徑語法，MDN SVG path reference 是個實用的參考資料。
三個步驟產生你的第一個 SVG Blob
- 設定四個控制項。選擇介於 3 到 12 之間的頂點數、介於 0 到 100 之間的不規則百分比、三個大小預設中的其中一個，以及一個六位數的 HEX 填色。每次按下按鍵或拉動滑桿時，預覽都會更新，因此請一次只改變一個變數，觀察輪廓的回應。
- 反覆點擊 Randomize Shape 直到預覽符合你的設計，並記下顯示的種子。Randomize Shape 只在你按下按鈕時，才會向瀏覽器的加密隨機來源索取一個全新的無符號 32 位元種子，因此無關的重新渲染或頁面重新整理都不會默默改變圖形。目前的種子會顯示在結果下方，這正是讓形狀能夠重現的關鍵。
- 複製 SVG 標記或下載向量檔，然後在目標應用程式中測試。使用 Copy SVG 將完整標記推送到剪貼簿，或使用 Download SVG 儲存檔名含有種子的檔案。請在你打算使用的瀏覽器、編輯器、電子郵件用戶端或內容系統中開啟這個檔案，因為有些消毒機制即使在標記本身有效時，仍會拒絕行內 SVG 或資料 URL。
這個三步驟的循環——設定、隨機化並記錄、複製或下載——涵蓋了這個工具能做到的所有事情。頁面的其他部分，不是即時文件本身的檢視，就是它的傳輸方式。
讀取與儲存種子
種子是控制半徑如何分布的唯一數字。由於不規則產生器是確定性的且經過種子化，因此相同的種子搭配相同的頂點、不規則度、大小與顏色，永遠會產生相同的點、相同的路徑資料，以及相同的 SVG 標記。這讓種子成為你所喜愛形狀的可攜把手:把它和另外四個輸入一起儲存，你就能在任何能執行這個工具的機器上重新建立完全相同的 blob。
| 動作 | 種子行為 | 其他設定 |
|---|---|---|
| 在四個控制項中的任何一個輸入 | 保持不變 | 變更為你的新值 |
| 點擊 Randomize Shape | 替換為全新的加密隨機值 | 保持不動，因此幾何與顏色維持穩定 |
| 點擊 Copy SVG 或 Download SVG | 保持不變 | 保持不動;目前的設定會一起寫入檔案 |
| 未儲存種子便重新整理頁面 | 重設為頁面的初始值 | 重設為頁面預設值 |
如果你需要永久的紀錄，請把種子與四個明確的設定一起寫下來。像「8 個頂點、40% 不規則度、512 px、#4A90E2、種子 1739482103」這樣簡單的一行，就能在日後重現這個形狀。關於這個習慣的更完整說明，請參考 reproducing the same SVG blob later by saving the seed 指南。
複製或下載向量
Copy SVG 會將完整標記寫入剪貼簿，包括 SVG 元素、寬、高、viewBox、影像標籤，以及一條 path。如果瀏覽器封鎖剪貼簿存取，同樣的標記會顯示在緊鄰預覽的唯讀文字區中，你仍然可以手動選取並貼到編輯器中。Download SVG 使用的檔名會包含種子，方便日後辨識檔案，而檔案本身是一個以資料 URL 編碼的真實 SVG 文件——它不是螢幕擷圖，也不是經過點陣化的預覽。因為檔案帶有對應的 viewBox，當你在任何遵循 SVG 幾何的編輯器或瀏覽器中調整大小時，它依然會保持向量格式。
請記住:你複製的內容就是下載的內容。沒有獨立的「高品質匯出」管道、沒有隱藏的最佳化器，也沒有伺服器端的點陣化步驟。如果你需要漸變、描邊、動畫，或超出這個工具所提供的簡單影像標籤的輔助資料，請在檔案離開產生器後，在專門的向量編輯器中加入。
開始前值得了解的限制
Blob 是裝飾性的幾何圖形，不是數學上的圓、標誌淨空規則、地理輪廓、生物模型，或隨機產生的識別標記。把它當成這些東西，將會設定錯誤的預期。增加頂點數量會為輪廓增加細節，但不會提升匯出座標的精度，因為每個數值在序列化時都會被四捨五入到小數點後兩位。這個四捨五入機制能讓標記保持精簡且穩定，同時為最大 1024 像素見方的畫布保留足夠的解析度。較高的不規則度數值可能會產生緊密的彎折或視覺質量失衡，因此在採用之前，請同時在大尺寸與小尺寸的顯示環境下檢視預覽。
如果 blob 會放在文字後方，請實際檢查對比度，而不是依賴 SVG 的畫布邊界來保證可讀性——這個工具會在形狀周圍保留邊界，但它並不會為你衡量文字的可讀性。瀏覽器內建的色彩選擇器在正常互動時會提供有效的六位數 HEX 值，而產生器會拒絕任何其他輸入，因此你不會看到默默夾緊的情況。最後，請計畫在實際的目標環境中測試匯出的檔案:電子郵件用戶端、設計工具與內容系統，即使在標記本身技術上有效時，也可能各自對行內 SVG 或資料 URL 加諸自己的規則。在目標環境中執行快速的渲染檢查，是在消毒機制進入正式環境前，以最低成本抓出問題的方法。
想進一步了解，請參考 Fix a Wrong SVG Pattern Result After Generation。