SVG 圖樣產生器對相同的輸入會產生位元層級完全相同的輸出:相同的圖樣樣式、瓷磚尺寸、形狀寬度、前景顏色和背景顏色，永遠會重新產生相同的單一瓷磚 SVG 標記以及相同的百分比編碼 CSS 背景。這種確定性，正是讓結果能在不同工作階段、裝置和團隊成員之間保持一致的原因。產生器會儲存一個具有確定性圖案幾何的方形瓷磚，將該瓷磚字串百分比編碼為 CSS 資料 URL，並讓預覽、標記、CSS 和下載保持同步。只要你儲存所使用的五個數值和顏色控制項，並維持在支援的範圍內，就能隨時在任何機器上重建出完全相同的圖樣，無需重新上傳檔案或手動重新推導幾何。這套工具完全在瀏覽器中執行，因此伺服器端不會儲存任何資料，沒有隨機種子、沒有每次工作階段的變化，也沒有任何會在多次執行之間悄悄改變結果的隱藏轉換。

大多數圖樣的意外狀況來自三個地方之一 —— 控制項沒有全部儲存、控制項在嘗試之間被稍微移動，或渲染的瓷磚在與設定控制項時不同的尺寸下被判斷。本文會逐步說明產生器實際做了什麼來保持結果穩定、你需要記錄哪些內容才能重現相同的圖樣，以及相同的設定在執行階段為何仍可能看起來不同。

how do i repeat the same result when i generate svg pattern
如何在產生 SVG 圖樣時重複相同的結果

對此產生器而言「重複相同的結果」代表什麼

重複相同的結果，與重新產生一個看起來相似的瓷磚並不相同。SVG 圖樣產生器使用確定性幾何:每一種樣式 —— 點、格線、對角線或波浪 —— 都有一個固定的建構規則，在方形瓷磚內將圖案元素放置於可預測的位置。點樣式會在瓷磚中心繪製一個圓形。格線只繪製頂邊和左邊，讓相鄰的瓷磚在不會產生雙重寬度內部線條的情況下構成完整的格子。對角線樣式繪製會跨越瓷磚邊界的平行線段，使相鄰的複製品能延續條紋節奏。波浪樣式則放置一條二次曲線，接著以平滑的二次延伸跨過瓷磚邊界。由於每個圖案位置都是由控制項計算出來的，瓷磚的任何元素都不會被隨機化，也沒有抖動、雜訊或隱藏的位移。

在這個確定性幾何之上，三個同步的輸出 —— 持續重複的即時預覽、獨立的 SVG 標記，以及 CSS 資料 URL —— 每次你變更控制項時，都會從同一個內部瓷磚字串重新產生。下載按鈕儲存的是標記欄位中顯示的同一個單一瓷磚，而不是預覽區域的螢幕擷圖。因此，當問題是如何在產生 SVG 圖樣時重複相同的結果，答案就是儲存輸入，而不是儲存檔案:任何以相同輸入進行的重建，都會產生位元層級完全相同的瓷磚和 CSS，包括百分比編碼和小寫的六位數 HEX 顏色。對於這個實作所匯出對應的底層瓷磚繪製行為，W3C SVG 2 patterns 規格和 MDN pattern 元素參考 說明了如果改用內部 SVG pattern 元素包裝時，相同幾何會如何運作。

定義可重現圖樣的五個控制項

共有五個控制項，且五個全都會參與結果的產生。即使只改變其中一個 —— 例如形狀寬度的一個像素 —— 也會產生不同的瓷磚，進而產生不同的 CSS 輸出。前景與背景顏色必須是六位數的 HEX 值;產生器會將它們正規化為小寫，因此輸入的大小寫不會改變輸出，但任何一個數字的差異絕對會。瓷磚尺寸限制為 8 到 128 像素之間的整數，形狀寬度限制為 1 到 12 像素之間的整數。超出範圍的值會被純粹的產生器直接拒絕，而不會被默默修正，因此一個含有超出範圍數字的已儲存配方將無法重現。

控制項允許範圍對瓷磚的影響
圖樣樣式點、格線、對角線、波浪選擇瓷磚內部使用的確定性圖案建構規則
瓷磚尺寸8–128 px 的整數設定水平和垂直方向的重複間隔;較小會容納較多圖案，較大會留出較多空間
形狀寬度1–12 px 的整數點樣式:點的半徑。格線、對角線和波浪樣式:筆畫寬度
前景顏色6 位數 HEX，正規化為小寫所繪圖案的顏色
背景顏色6 位數 HEX，正規化為小寫整個瓷磚背景矩形的顏色

由於在點樣式中，形狀寬度代表點的半徑，而在線條樣式中代表筆畫寬度，因此跨樣式使用相同的數值並不保證視覺上的粗細相等。針對單一樣式的等數值比較，應以渲染後的預覽為準，而不是看滑桿的數值，尤其是在前景與背景對比強烈的情況下。

逐步重現相同的圖樣

  1. 在瀏覽器分頁中開啟 SVG 圖樣產生器。
  2. 選擇符合你想重現外觀的圖樣樣式 —— 點、格線、對角線或波浪。
  3. 將瓷磚尺寸設定為你先前使用的 8 到 128 px 之間的整數，因為這個數字會控制水平和垂直方向的重複間隔。
  4. 將形狀寬度設定為你先前使用的 1 到 12 px 之間的整數，並記得它的意義取決於你選擇的樣式。
  5. 輸入前景與背景相同的六位數 HEX 值，大小寫不限 —— 工具會在編碼前將它們正規化為小寫。
  6. 在你實際使用圖樣的近似尺寸下檢視重複的預覽，因為相同的數值並不保證相同的視覺粗細。
  7. 使用「複製 CSS」來取得含對應背景尺寸的百分比編碼 SVG 資料 URL，使用「複製 SVG」來取得獨立的瓷磚標記，或使用「下載 SVG 瓷磚」來儲存單一的來源瓷磚。
  8. 將你使用的五個控制項連同匯出的 CSS 或 SVG 一起記錄下來，這樣下次以相同數字重建時，就能產生位元層級完全相同的結果。

確認輸出與先前的執行相符

由於產生器每次都從頭重建瓷磚，確認的方式就是將重新產生的輸出與儲存的參考資料進行比對。如果你還保留著 CSS，將它貼到檔案比對工具中，檢查是否符合字元層級的相符;如果你只有獨立的 SVG，則可以對標記欄位進行同樣的比對。兩個輸出都是確定性的，因此任何差異都代表五個控制項中至少有一個產生了偏移。工具也會讓預覽、標記和 CSS 保持同步，因此當預覽與你貼到別處的 CSS 之間出現可見的不符時，幾乎總是代表並非所有控制項都被帶過來了。如果目標是重現一次精確的執行，而不是重現某種外觀，那麼應將控制項視為真實來源，將檔案輸出視為驗證依據。如需更完整的逐步說明，了解如何將重新產生的檔案與儲存的參考資料進行比對，請參閱 如何驗證產生的 SVG 圖樣結果。

為何相同的設定在螢幕上看起來仍可能不同

產生器中的確定性並不會延伸到渲染的像素層級。一條跨整數 CSS 背景尺寸繪製的 1 px 筆畫，在 50% 的瀏覽器縮放、非整數的 CSS 像素比率，或使用分數版面縮放的容器中，看起來會有所不同。反鋸齒的決策是由瀏覽器和 GPU 做出的，而不是由產生器決定，而對比鮮明的顏色可能會在瓷磚邊界處顯露出這些接縫。非常大的筆畫寬度可能會主導小瓷磚，掩蓋重複的節奏;而非常小的筆畫寬度則可能在高縮放等級下完全消失。

瓷磚本身並不會改變，但接縫的可見品質會改變。在不同環境間保持結果穩定的方法，是在圖樣實際使用的近似尺寸下檢視重複的預覽，然後在目標裝置的像素比率下測試部署後的 CSS，再將結果視為最終版本。產生器不保證印刷套準、感知上的均勻性，或與以不同方式光柵化 SVG 的軟體之間的相容性。

另一個相關的飄移來源是目標環境，而不是產生器。CSS 使用百分比編碼的資料 URL，嚴格的內容安全政策、清理器、電子郵件用戶端或內容管理系統可能會封鎖它。發生這種情況時，相同的瓷磚仍然能正確產生 —— 你可以在標記欄位中看到 —— 但目標環境會拒絕渲染它。解決方法是下載 SVG 瓷磚，將其作為已核准的資產提供，並將 CSS 中的資料 URL 替換為資產 URL。無論哪種方式，視覺上的重複都是由 CSS 背景平鋪執行的，而瓷磚內容仍然保持位元層級完全相同。

儲存配方以便日後重現結果

由於所有可重現的內容都來自五個控制項，你唯一需要保留的持久性產物就是配方:樣式、瓷磚尺寸、形狀寬度、前景 HEX、背景 HEX，以及你檢視預覽時的目標 CSS 尺寸註記。匯出的 CSS 或下載的 SVG 是有用的驗證快照，但它隨時都能從配方重新產生。如需更完整的工作流程，了解如何將該配方附加到專案中，請參閱 記錄 SVG 圖樣產生工作流程。

將儲存的配方與兩個 HEX 值的快速對比檢查搭配使用，或是與從相同基準色彩提取的調色盤搭配使用，也能避免圖樣在下次重建時偏離整體設計系統。你所記錄的兩個 HEX 值，是將這個圖樣與其周圍顏色連結起來的輸入;而三個數值與樣式輸入，則是讓瓷磚本身可重現的關鍵。