在你產生 SVG 形狀後,檢查結果代表三件具體的事:確認預覽符合你的設計意圖、透過「複製 SVG」或「下載 SVG」匯出標記,以及在形狀實際要使用的瀏覽器、編輯器、電子郵件用戶端或內容系統中開啟該檔案。SVG 形狀產生器為頁面上的預覽、剪貼簿複製動作與下載的檔案建立相同的 SVG 字串,因此你在預覽中看到的內容與匯出的內容完全一致——沒有任何隱藏的點陣後備方案或第二階段最佳化步驟會悄悄改變幾何形狀。座標在序列化時會四捨五入到小數點後兩位,路徑是單一條二次貝茲曲線輪廓,填色為嚴格的六位數十六進位值,因此你收到的檔案既小、清晰且可重現。顯示的無號 32 位元種子值會出現在結果下方,讓你日後只要重新輸入相同的頂點、不規則度、大小、顏色與種子,就能重新產生完全相同的形狀。由於此工具在瀏覽器中處理所有作業且絕不上傳任何內容,唯一能可靠確認檔案行為是否符合預期的方式,就是在它實際部署的環境中測試匯出的標記。
「檢查結果」實際涵蓋哪些內容
一個乾淨的 SVG 形狀是裝飾性的幾何圖形,而不是標誌、地圖輪廓或數學上的圓形。因此檢查結果同時包含視覺面與結構面。視覺面上,你會觀察輪廓的平衡、邊緣的平滑度、顏色,以及形狀在其實際呈現大小下的呈現效果。結構面上,你會確認檔案包含你預期的內容:單一條路徑、符合寬度與高度的 viewBox、六位數的十六進位填色,以及沒有漸變、描邊、陰影、動畫或點陣後備方案。SVG 形狀產生器刻意產生這種精簡的結構,讓檔案保持可攜性。如果你需要描邊、動畫或漸變,這些是之後在向量編輯器中加入的;此工具是形狀的來源,而不是最終的素材,其標記刻意保持精簡,讓下游的編輯器能夠乾淨地加以擴充。
匯出前檢查即時預覽
頁面上的預覽僅受限於版面配置,而非 SVG 自身的寬度與高度,因此你在瀏覽器中看到的內容可能相對於要求的畫布大小被放大或縮小。在複製或下載之前,請將頂點設定在 3 到 12 之間、不規則度設定在 0 到 100 百分比之間、畫布大小設定在 128 到 1024 像素之間,並選擇你想要的十六進位顏色,然後觀察預覽的更新。透過開啟下載的檔案或將複製的標記貼到真正的檢視器中,以實際目標大小來檢視輪廓。高的不規則度可能會產生緊密的彎曲或視覺上的不平衡,因此請掃描輪廓是否有過細或過窄的區域。低不規則度搭配低頂點數會產生接近圓形的形狀;高不規則度搭配高頂點數會產生更有機、更凹凸不平的輪廓。如果出現有用的形狀,請立即記錄顯示的種子值——這就是可重現性的依據,而且它會一直顯示在預覽下方。
| 控制項 | 可接受範圍 | 預覽中要檢查的內容 |
|---|---|---|
| 頂點 | 3 – 12 (整數) | 較高的數量會增加輪廓細節;較低的數量會產生接近圓形的形狀。 |
| 不規則度 | 0 – 100 (百分比) | 零會讓每個頂點的半徑相同;較高的數值允許有機的變化。 |
| 畫布大小 | 128 – 1024 px (正方形) | 請設定為你實際要渲染的大小;小畫布可能會擠壓緊密的彎曲。 |
| 填色 | 嚴格的 6 位數十六進位值 | 匯出前檢查與文字和背景之間的對比。 |
| 種子 | 無號 32 位元整數 (顯示用) | 請將此數字與四個設定一併記錄,以便日後重現。 |
匯出並測試結果
- 在控制項中調整頂點 (3–12)、不規則度 (0–100%)、大小 (128–1024 px) 以及填色,直到預覽看起來正確。
- 視需要反覆按下「隨機化形狀」,直到找到符合你設計的輪廓;每次按下時顯示的種子都會改變,因為此按鈕會向瀏覽器的加密隨機來源要求一個新的無號 32 位元值。
- 記下預覽下方顯示的種子值,以及你的四個設定,這樣日後僅憑這五個數字就能重新產生相同的形狀。
- 點擊「複製 SVG」將完整的標記放到剪貼簿;如果瀏覽器拒絕剪貼簿存取,相同的標記也會顯示在一個唯讀的文字區域中,以便手動選取與複製。
- 點擊「下載 SVG」將獨立的 .svg 檔案儲存下來,檔名中包含種子,讓磁碟上的素材仍帶有其可重現性的金鑰。
- 在瀏覽器、程式碼編輯器或向量應用程式中開啟複製的文字或下載的檔案,確認它以你所要求的像素大小呈現出與預覽中看到相同的效果。
- 在實際的目的地——電子郵件用戶端、CMS、設計工具或框架——中測試檔案,因為某些清理工具會限制內嵌 SVG 或封鎖資料 URL,即使標記本身是有效的。關於平台特定行為的指南說明了你可能遇到的限制以及應對方式。
驗證標記結構
在交付檔案之前,請檢視標記本身,而不僅僅是渲染後的預覽。產生器會寫入一個 svg 根元素,帶有明確的寬度、高度、符合的 viewBox、可存取的影像標籤、單一條路徑,以及嚴格的六位數十六進位填色。沒有 CSS 類別、沒有 defs 區塊、沒有 linearGradient、沒有 filter、沒有 animate、沒有 style、沒有 metadata,也沒有嵌入的點陣影像。座標四捨五入到小數點後兩位,讓檔案保持可讀性,而在支援的畫布大小下,這種四捨五入並不會降低視覺上的精細度。如果檔案包含任何這些額外的元素,表示形狀在匯出後被編輯過——產生器本身不會產生這些元素。MDN SVG path 元素參考說明了瀏覽器如何解析 path 資料,而 W3C SVG 2 Paths 規範定義了產生器在序列化文法中所依賴的 move、quadratic Bézier 與 close-path 指令。
使用種子確認可重現性
種子是鎖定形狀的唯一數字。相同的頂點、不規則度、大小、顏色與種子,永遠會產生相同的點、path 資料與 SVG 標記,因為每個頂點的半徑是從一個具確定性的種子產生器中取得的。按下「隨機化形狀」時,只有在按下的那一刻才會向瀏覽器的加密隨機來源要求新的種子;在 React 渲染期間絕不會呼叫隨機性,因此水合作用和不相關的重新渲染都不會悄悄改變圖形。若要在幾個月後重新建立一個形狀,只要將種子連同相同的四個設定一起貼回產生器即可。不需要將 SVG 檔案儲存起來作為可重現性的記錄——四個設定加上一個數字就足夠了,這就是為什麼在下載檔名以及頁面上的種子,值得在你關閉分頁之前先擷取下來。
當形狀位於文字後方時檢查對比與版面配置
如果形狀位於文字後方,對比與留白的影響比形狀本身更大。請使用顏色對比檢查工具來驗證文字顏色對形狀的填色(而非僅針對頁面背景)的對比,因為在任何像素上看到的顏色取決於最上層的內容。真實的對比取決於文字與形狀重疊的位置,因此請檢查多個位置而不僅僅是中心——形狀是裝飾性的幾何圖形,不是均勻的色塊,其填色在整個形體上的呈現效果會有所不同。請在文字與形狀邊緣之間預留足夠的留白。此工具採用保守的畫布邊界,讓幾何圖形保持在正方形範圍內,但這並不能保證可讀性,因此請自行設計間距,而不要依賴該邊界。如果形狀在最終版面中以小尺寸呈現,請也以該大小開啟檔案,確認緊密的彎曲在低解析度下不會出現像素化或擠壓的情形。
延伸閱讀:產生 SVG 圖樣時避免犯錯。