在產生 SVG 形狀前,您需要比較的五項輸入為:頂點數(3 到 12)、不規則程度(0 到 100%)、畫布尺寸(256 到 1024 像素)、填色(6 位數 HEX)、以及控制可重現隨機性的種子。提前比較這些項目,能避免您重做工作,因為每個控制項都會直接影響匯出 SVG 的形狀、幾何、顏色與日後能否重新生成。SVG Blob Generator 僅以這組精簡且明確的控制項產生一個小巧的有機向量形狀,工具本身不會添加漸變、描邊、陰影或動畫,所以任何您想要的視覺屬性都必須來自這五項輸入其中之一。由於頂點會均勻分佈在畫布中心,不規則程度會透過一個確定性的種子產生器改變每個頂點的半徑,結果會以單一 path 序列化,並將座標四捨五入、採嚴格的 HEX 填色,您事前所做的選擇會延續到每一次複製、貼上下載。請把這次比較當作在按下「Randomize Shape」或複製標籤前要跑過的檢查清單。

在產生 SVG 形狀前要比較什麼
產生前的比較,並不是在多套軟體之間選一個,而是要把工具少量的輸入與您的設計目標對齊。SVG Blob Generator刻意只做一個聚焦的形狀產生器,而非完整向量編輯器,所以您比較的控制項就是產生檔案的同一組控制項。事先比較這些項目,能讓您不必反覆按「Randomize Shape」幾十次,也能讓您明確記錄是哪一組設定(包含顯示出的種子)可以日後重現同一條 path。如果您的專案需要漸變、描邊、陰影、裁切路徑、動畫,或任何超出純色填補的樣式,這些都必須之後到向量編輯器中再加上;您在這裡做的比較應該把這個落差納入考量。
| 要比較的項目 | 為何重要 | 需要權衡的取捨 |
|---|---|---|
| 頂點數 | 決定輪廓有多分明 | 頂點數越多細節越多,但不會提升匯出座標的精度 |
| 不規則程度 | 為每個頂點加入有機的徑向變化 | 數值過高可能產生過緊的彎折或視覺重心失衡 |
| 畫布尺寸 | 決定匯出檔案的像素寬、高以及 viewBox | 畫布越大,來源 viewBox 越大,但座標一樣是兩位小數精度 |
| 填色 | 決定單一 path 的視覺識別 | 僅接受 6 位數 HEX;漸變、描邊與陰影不是工具所加入 |
| 種子可重現性 | 讓您日後能重現完全相同的形狀 | 若沒有種子,即使設定相同仍會產生不同的形狀 |
依所需細節程度比較頂點數
SVG Blob Generator 的頂點數接受 3 到 12 之間的整數。每個頂點以等角度間隔分佈於畫布中心,渲染輪廓時從最後一個頂點與第一個頂點的中點開始,依序用二次貝茲曲線(由原始頂點控制)將各中點相連。意思是頂點越多,輪廓越分明,邊緣的圓潤弧葉越多;頂點越少,形狀越厚實、越簡化。增加頂點數並不會提高匯出座標的精度——工具在序列化時一律將座標四捨五入到兩位小數,與您選多少頂點無關。所以這裡的比較純粹是視覺上的:目的地的設計能容納幾個弧葉?在小尺寸下的可讀性是否符合需求?
若是用於標題裝飾或段落分隔區,3 到 6 個頂點通常已經夠乾淨俐落。若是用於主視覺插圖或以輪廓本身為主角的形狀品牌識別,8 到 12 個頂點能帶來更多曲線,卻不會讓檔案大小明顯膨脹。並沒有客觀的正確數字——請把預覽結果與 SVG 實際出現的位置比對。
依形狀個性比較不規則程度範圍
不規則程度是 0% 到 100% 之間的一個數字,控制每個頂點半徑可變動的範圍。在 0% 時,每個頂點到中心的距離都相同,形狀會趨近於正圓(接合處只是更平滑的貝茲曲線)。不規則程度越高,種子化產生器會把某些頂點推得更遠、另一些拉得更近,這正是形狀有機感的來源。「Randomize Shape」只在按下按鈕時向瀏覽器的密碼學亂數源索取新種子,所以同一個不規則程度設定在重抽種子後,能產生差異很大的形狀。
需要權衡的取捨在於平衡感。低不規則程度讀起來冷靜、幾何、可預期;高不規則程度讀起來俏皮、有表現力,但可能產生過緊的彎折或視覺重心失衡,讓觀者目光偏離您的內容。請同時在大、小尺寸下檢視預覽,因為在 512 像素看起來消失的輕微晃動,到了 64 像素可能變成尖銳的夾角。輸出會維持在保守的畫布邊距內,所以輪廓不會被裁切,但若不規則程度被推到上限,整體仍可能感覺不對稱。
依形狀放置位置比較畫布尺寸
SVG Blob Generator 讓您從 256 到 1024 像素中挑一個正方形畫布。由於 SVG 文件明確宣告了 width、height 與對應的 viewBox,所選的尺寸會成為匯出檔案的像素尺寸。頁面上的預覽僅受限於版面配置,並不會取代您要求的尺寸,所以您在螢幕上看到的縮放結果可能和下載下來的不一樣。所有畫布尺寸的匯出座標精度都固定為兩位小數,所以更大的畫布不會給您更多小數精度,只會給您更大的 viewBox。
這裡的比較是在來源解析度與預期顯示之間。一個 256 像素的形狀足以用於小型 UI 裝飾、大頭照預設圖示,或 SVG 很少被放大檢視的低密度區域。一個 1024 像素的形狀則為您保留裁切、在向量編輯器中放大,或在主視覺與縮圖等不同情境下重複使用同一檔案的空間,而不必重新匯出。需要權衡的是:這個檔案已經宣告好它的尺寸——如果您需要一個能適應多種尺寸的彈性形狀,事後仍可再去編輯 width 與 height 屬性,但一開始就從您會用到的最大尺寸出發,可以避免失去細節。
依對比與品牌契合度比較填色
填色必須是 6 位數的 HEX 值,SVG 文件中的單一 path 元素會帶有一個嚴格的 HEX 填色。工具本身不會套用任何透明度、漸變、描邊或陰影。若您的目的地需要這些效果,請在匯出後到向量編輯器中加上。無效的顏色值會被純粹的產生器拒絕,而不是在背後偷偷被截斷到某個範圍內;但瀏覽器的色票選取器在正常互動下都會提供有效的值,所以這點主要在以程式方式呼叫產生器時才會有影響。
若是用在文字背後的背景,比較必須納入實際對比。請使用顏色對比檢查工具,把您計畫使用的文字顏色與形狀的填色比對,因為 SVG 的畫布邊距無法保證可讀性。若形狀是要放在內容旁而非背後,請在版面中預留足夠的留白,避免形狀擠壓文字或其他元素。在品牌對齊方面,如果您已有定義好的色票,可以先用色票產生器或互補色查找工具決定 HEX,再進行產生,這樣您在這裡做的比較就會是在既有色票與形狀所扮演的角色之間進行。
依重複使用與版本控管比較種子可重現性
種子是一個顯示於結果下方的 32 位元非負整數。同樣的頂點、不規則程度、尺寸、顏色與種子,永遠會產生同樣的點、同樣的 path 資料、同樣的 SVG 標籤——這就是形狀可以重現的原因。「Randomize Shape」只在按下按鈕時向瀏覽器的密碼學亂數源索取新種子,在 React 渲染期間並不會呼叫亂數,因此 hydration 與重新渲染都不會悄悄改變圖形。
您在這裡做的比較,是介於「我只要一個一次性的形狀」與「我之後要重現這個完全相同的形狀」之間。如果重複使用很重要——例如您想在行銷頁、電子郵件與未來的重新設計中放入同一個輪廓——請把種子與其他設定一起記下來。如果可重現性不重要,您只是在探索外觀,就可以忽略種子,只專注在好看與否。無論哪種情況,種子都是唯一一項無法從其他輸入還原的資訊,所以在開始前,它是清單中最該與您的工作流程進行比對的一項。形狀、顏色、種子或匯出標籤都不會被上傳,也不需要帳號或外部繪圖服務,就能把這份記錄保存在本機。
在比較完成後產生 SVG 形狀
- 打開 SVG Blob Generator,將頂點數設定在 3 到 12 之間,不規則程度在 0% 到 100% 之間,畫布尺寸在 256 到 1024 像素之間,並挑一個 6 位數 HEX 的填色。這些正是您方才比較的輸入。
- 反覆按下「Randomize Shape」,直到預覽符合您要對齊的設計。每次按下會產生新的種子;您選定的幾何與顏色會保持穩定。
- 讀取預覽下方顯示的種子,並把頂點、不規則程度、尺寸、顏色一起記下來,日後如需重現同一個形狀就能派上用場。相同的組合永遠會產生相同的 SVG 標籤。
- 點擊「Copy SVG」將完整標籤寫入剪貼簿。若瀏覽器封鎖剪貼簿存取,相同的標籤仍會顯示在一個唯讀的文字區中供您手動選取。
- 點擊「Download SVG」儲存檔案。檔名包含種子,而檔案本身是以 data URL 編碼的真實 SVG 文字——在相容的編輯器或瀏覽器中開啟時仍會保持向量幾何。
- 在目標應用程式中貼上或開啟該檔案並加以檢查。某些消毒機制即使在標籤本身有效時,仍會限制 inline SVG 或 data URL,因此在最終的瀏覽器、編輯器、電子郵件用戶端或內容系統中測試,才能確認成果。
如果結果看起來不對,請再走一次比較檢查清單——輸入都很明確,所以視覺不符通常可以追溯到您比較的這五件事之一。若要更深入的檢查,請參考產生 SVG 形狀後如何檢查結果;若要協助判斷形狀是否真的適合您的版面,請跑過產生 SVG 形狀的決策檢查清單。
Inspecting the Exported Markup and Limits to Know
The file you export is a small, predictable SVG document: an explicit width and height, a matching viewBox, an accessible image label, one path, and one strict six-digit HEX fill. There are no gradients, strokes, shadows, clipping paths, animation, CSS classes, metadata, optimization passes, or raster fallbacks added by the tool itself. Those can be added later in a vector editor if the destination requires them. Invalid values are rejected by the pure generator instead of being clamped behind your back, so if you try to push vertices below three or irregularity above one hundred, you will see no change rather than a silently corrected value.
Two limits shape what you can expect from the exported file. First, coordinates are rounded to two decimals when serialized, which keeps the markup readable and stable while retaining ample precision for the available canvas sizes — it does not increase when you raise the vertex count. Second, the file is genuine SVG markup, but destination sanitizers, email clients, and design tools can impose their own restrictions. The tool does not optimize SVG for every platform, so test the file where it will actually render. The SVG path grammar itself — move, quadratic curve, and close-path commands — is defined in the W3C SVG 2 Paths specification, and the browser-oriented reference is at MDN's SVG path element documentation.
The document is not a mathematical circle, a logo clearance rule, a geographic outline, a biological model, or a randomly generated identity mark — it is decorative geometry. Treat that scope as part of your comparison up front, and the tool will produce exactly what it claims to: a reproducible organic blob with a small, predictable vector file at the end.