SVG 圓形色塊結果看起來不對,幾乎一定是因為四個明確的控制項與您想要的視覺形狀之間不相符所致。產生器將頂點數量、不規則度、畫布大小和填色作為輸入參數,並將一個無符號的 32 位元種子作為可重現性的基準,用以決定半徑如何分配到各個頂點。修正方法是根據您實際需要的輪廓重新調整這些控制項,並記錄下顯示的種子,以便日後能找回修正後的形狀。由於 SVG 圓形色塊產生器 透過同一個路徑字串來建立預覽、複製的標記以及下載的檔案,因此您對輸入所做的任何更改都會即時反映在這三個地方。不會上傳任何內容,沒有伺服器回傳藏結果,渲染過程也不會呼叫隨機函式,所以唯一會改變色塊的因素,就是您所做的更改,或是「隨機化形狀」按所重設的種子。

how do i fix a result that looks wrong after i generate svg blob
如何修正看起來不對的 SVG 圓形色塊結果

SVG 圓形色塊中「看起來不對」通常代表什麼

產生後常見的問題可歸納為少數幾種可辨識的模式,而每種模式都對應到特定的控制項。如果色塊出現一、兩個明顯的急彎、收縮的腰部或尖銳的向內捲曲,通常是因為所選的頂點數量下,不規則度設定過高,因為過大的半徑變化會迫使相的點彼此拉開。如果色塊看起來像多邊形而非圓潤的凸起,通常是頂點數量相對於所選的畫布大小太少,導致中點之間的二次貝茲曲線接合處沒有機會變得圓滑。如果色塊的質量偏離中心、一側比另一側重,通常是因為不規則度接近最大值,因為過大的半變化會破壞等角間距原本所提供的視覺平衡。如果色塊的顏色色相不對,往往是因為某個在其他工具中看起來正確的 HEX 值,與您這裡想要的不符,因為產生器只接受嚴格的六位數 HEX 值,其他一律拒絕。最後,如果色塊在頁面預覽中看起來正常,但在您的設計工具中卻不對,通常是因為大小不符合目標用途,因為預覽受版面配置限制,而匯出的標記則保留您所要求的尺寸。

輸入範圍及其背後的限制

在變更任何設定之前,先了解產生器會接受哪些值、不會接受哪些值會有所幫助。這個工具刻意拒絕無效的值而非將其限制在範圍內,這表示 HEX 欄位中的打錯會被拒絕,而不是悄悄四捨五入成接近的顏色;而超出支援範圍的頂點數量也會被拒絕,而非強制轉為最接近的有效值。下表摘錄了四個明確的輸入加上種子,直接取自產生器所接受的值。

控制項可接受的值影響的內容
頂點數量整數,3 到 12以等角間距分佈於畫布中心的錨點數量
不規則度整數,0 到 100每個頂點的半徑相對於其他頂點可變化的程度;0 會產生相等的半徑
畫布大小整數,128 到 1024(邏輯值);介面中提供實際的預設值匯出 SVG 的寬度、高度以及對應的 viewBox
填色嚴格的六位數 HEX(例如 #4A90E2)套用於路徑的單一填色;不會加入漸變、描邊或陰影
種子無符號 32 位元整數,顯示於結果下方半徑分佈模式的決定性基準;相同的輸入加上相同的種子可重現相同的路徑

正是這種「無效即拒絕」的行為,讓修正結果值得信賴。您所看到的結果就是您所要求的結果,而不是將超出範圍的值悄悄改寫成看似合理的近似值。

透過三個調整步修正結果

修正產生錯誤色塊的實用工作流程分為三個階段:先調整形狀,再調整平衡,最後調整顏色與大小。按照這個順序進行調整,可以讓每次變更都清晰可讀,因為您隨時都能確認自己仍在解決輪廓問題,還是已經進入對比或版面的問題。

  1. 根據您實際需要的輪廓重新選擇頂點數量。三或四個頂點會產生大膽、幾近幾何的輪廓。八到十二個頂點則會產生更柔軟、更有機、色塊帶有較多圓潤凸起的形狀。如果目前的形狀看起來像多邊形,請增加頂點數量;如果它在所擁有的空間中顯得過於細,請減少頂點數量。
  2. 根據該頂點數量重新調整不規則度。種子控制半如何分佈,而不規則度則控制允許的變化程度。從零開始,以查看該頂點數量下的基準輪廓,然後以十為單位逐步提高不規則度,直到輪廓達到您想要的有機變化為止。如果出現急,請降低不規則度或增加頂點;如果形狀看起來過於均勻,請提高不規則度。
  3. 根據目標用途重新選擇畫布大小與填色。讓畫布符合版面的空間,這樣匯出的標記日後就不需要調整大小,並讓填色符合周遭的配色。一旦輪廓、大小和顏色都正確後,請按下「隨機化形狀」直到預符合您的設計,然後記錄結果下方顯示的種子。將該種子與四個輸入一起儲存,是讓您日後(數週後)能夠重新產生完全相同色塊的關鍵步驟。

在確定之前,請同時以您打算使用的大小和較小的圖示大小檢查預覽。較高的不規則度在主視覺尺寸下可能看起來戲劇性十足,但在圖示尺寸下可能顯得參差不齊,而產生器並不會自動為您補償這點。

日後重現可用的版本

種子是唯一能將看似隨機的半徑模式連結回特定形狀的資訊。頂點數量、不規則度、大小和顏色是您已設定的輸入;種子是您原本會遺失的唯一一項輸出。將它與這四個輸入一起儲存,您就擁有了一份完整的配方。W3C SVG 2 規範 定義了產生器所輸出的路徑指令,包括移動、二次貝茲曲線以及關閉路徑,當輸入與種子相符時,這些指令在不同次渲染間會保持位元穩定。MDN SVG 路徑參考 從瀏覽器的角度描述了相同的語法,如果您想手動閱讀產生的標記,這會很有用。因此,相同的輸入與相同的種子會產生相同的點、相同的路徑資料以及相同的標記,這正是讓已記錄的修正在下週或下個月仍然有用的原因。如需更完整的擷取配方流程,請參閱 透過儲存種子日後重現相同的 SVG 圓形色塊

在實際使用環境中測試輸出

在預覽中看起來正確的色塊,在您將標記貼入 CMS、電子郵件範本、設計工具或內容安全過濾器後,仍可能看起來不對。有些平台會完全移除內嵌 SVG,有些則會拒絕資料 URL,即便底層標記是有效的,因為下載檔案是編碼為資料 URL 的真實 SVG 文字。請在將實際使用的同一個瀏覽器、編輯器或內容系統中,開啟下載的檔案,或將複製的標記貼到全新的 HTML 頁面中。如果平台拒絕該檔案,修正方法在平台層而非產生器:您可能需要將 SVG 作為外部檔案託管、改用平台接受的點陣圖替代方案,或查閱該平台對於內嵌內容的說明文件。產生器並未針對任何特定目標環境進行最佳化,也不會加入漸變、描邊、陰影、裁剪路徑、動畫、CSS 類別、元資料、最佳化處理或點陣圖替代方案。如果目標環境需要這些,可在後續的向量編輯器中疊加上去,但預設情況下它們不會包含在匯出的檔案中。如需更完整的產生後檢查流程,請參閱 如何在產生 SVG 圓形色塊後檢查結果

當 SVG 看起來正確,但您的讀者看不出來

另一類「看起來不對」的抱怨,根本不是產生器的問題。放置在內文後方的色塊,可能通過美感檢查卻未通過對比檢查,因為頁面上的預覽無法預測將疊加在上面的文字顏色、粗細或背景。請使用對比工具將填色與文字顏色進行比對,並在輪廓周圍保留留白,而非假設畫布邊距能保證可讀性。以主視覺大小設計的色塊,在以圖示大小渲染時也會讓急彎顯得更為尖銳,因此在確定之前,請同時以這兩種大小檢查預覽。在桌面瀏覽器上看起來正常的色塊,如果所選大小原本就偏小,在高 DPI 的行動裝置螢幕上看起來仍可能顯得單薄;在匯出前先將畫布調大,通常比重設大小更為省事。