看起來錯誤的 SVG 圖樣，幾乎都能追溯到以下三個原因之一：控制項數值產生了與預期不同的視覺效果、幾何在拼貼邊界處正確但在反鋸齒或分數縮放下破裂，或目的地環境會剝離或阻擋資料 URL。SVG 圖樣產生器會產生一個具有確定性幾何的單一正方形拼貼，然後透過 CSS 背景拼貼來顯示該拼貼的重複結果，因此預覽、獨立的 SVG 標記以及 CSS 資料 URL 所描述的都是同一個成品。由於拼貼是由一個方形中的一個圖案所構成，唯一會改變外觀的旋鈕就是樣式、拼貼尺寸、形狀寬度、前景與背景。請對照即時的重複預覽，一次調整一個旋鈕來修正錯誤結果，並在圖樣實際呈現的尺寸下重新檢查。不同樣式之間相同的數值並不保證視覺上的權重相同，而在小尺寸預覽中看起來清楚的數值，在完整尺寸下可能會顯得不均勻。
為什麼 SVG 圖樣在產生後看起來錯誤
大多數錯誤結果可以歸入四個類別。第一個是樣式與數值的混淆：形狀寬度在點狀樣式中代表點的半徑，在線條樣式中則代表筆畫寬度，因此同一個數字在四種樣式之間讀起來差異極大。第二個是縮放問題：一條在 256 像素預覽中看起來銳利的單像素筆畫，在 64 像素時可能會顯得粗糙，因為渲染器正在分配像素。第三個是對比問題：低對比的前景與背景組合可能會讓圖案看起來褪色或看不見，即使幾何是正確的。第四個是目的地問題：禁止資料 URL 的內容安全政策、會剝離資料 URL 的電子郵件用戶端，或會改寫資料 URL 的 CMS 清理器，都會在正式環境中產生遺失或格式錯誤的圖樣，即使預覽看起來正常。
最簡單的除錯原則是一次只更改一個控制項。產生器會讓預覽、標記和 CSS 保持同步，因此任何視覺上的變化都可以追溯到確切的單一旋鈕。如果你一次更改兩個旋鈕而結果看起來比較好，你就無法知道哪一個才是關鍵，事後也無法還原錯誤的那一個。請將有效的設定與專案備註一起儲存，以便下次使用相同的輸入能重現相同的輸出。
每種樣式應該呈現的外觀
四種樣式有不同的幾何結構，「錯誤」在每種樣式中也代表不同的意思。產生器為每種樣式使用確定性的幾何，因此每一種都有可以辨識的特定失敗模式。當圖樣不如預期時，請使用下表作為檢查清單。
| 樣式 | 幾何的作用 | 錯誤時通常的樣貌 | 優先調整的控制項 |
|---|---|---|---|
| 點狀 (Dots) | 在拼貼中心的一個填滿圓形 | 點太小、太大，或融入背景 | 形狀寬度（決定半徑） |
| 格狀 (Grid) | 僅繪製儲存格的頂部與左側邊緣，使相鄺的副本在不產生雙倍寬度內部線的情況下構成規則的格子 | 缺少內部線條，或儲存格中央的牆面看起來特別粗 | 拼貼尺寸（決定儲存格大小） |
| 對角線 (Diagonal) | 多條平行線段跨越拼貼邊界，讓相鄺的拼貼能延續條紋的節奏 | 兩個拼貼交界處可見的接縫、節奏被打斷、明暗交替 | 形狀寬度與拼貼尺寸一起調整 |
| 波浪 (Waves) | 一條二次曲線，後接跨越拼貼的平滑二次延伸 | 曲線看起來平坦、鋸齒狀，或在接縫處明顯偏移 | 拼貼尺寸（決定波長） |
以實際尺寸診斷即時預覽
預覽是透過工具輸出的同一段 CSS 來渲染的：在 background-image 中放入經過百分比編碼的 SVG 資料 URL，並將 background-size 設定為拼貼尺寸。這讓預覽成為瀏覽器實際繪製內容的公平呈現，但僅限於預覽本身的像素尺寸。有三種情況會讓預覽作為診斷工具失效。第一，你可能正在以放大或縮小的方式檢視頁面，而 CSS 背景會跟著頁面一起縮放。第二，目的地元素的圖樣會以不同的像素大小呈現，例如 600 像素寬的焦點橫幅與 96 像素的卡片。第三，目的地元素可能會在高 DPI 顯示器上使用非整數的 CSS 縮放係數，這會暴露單像素筆畫的反鋸齒問題。
針對上述每一種情況，請調整瀏覽器視窗大小，或使用瀏覽器的裝置像素比模擬功能，來逼近實際目的地。小尺寸預覽的肌肉記憶對拼貼圖樣來說並不可靠，因為眼睛會自動填補在完整尺寸下消失的接縫，並忽略在完整尺寸下會變得明顯的單像素斷裂。如果你想要更嚴謹的檢查，請先依照 如何驗證產生的 SVG 圖樣結果 中的驗證步驟，再宣告圖樣已修正。
調整控制項直到圖樣正確呈現
這是在工具內部進行修正的工作流程。請依序執行下列步驟，並在結果於目的地尺寸下看起來正確時停止。每一步都建立在前一步之上，產生器會讓預覽、SVG 標記與 CSS 保持同步，因此你可以將任何變化對應回單一的輸入。
- 開啟 SVG 圖樣產生器，並選擇符合你預期用途的圖樣樣式：點狀、格狀、對角線或波浪。
- 以整數像素輸入拼貼尺寸。介面接受 8 到 128 的整數。建議從接近實際使用尺寸的數值開始；卡片表面可從 24 或 32 開始；焦點背景可從 64 或 96 開始。
- 輸入形狀寬度。介面接受 1 到 12 的整數。細緻紋理使用 1 到 3，大膽的圖案使用 4 到 8。請勿假設來自其他樣式的數值在此處看起來會一樣，因為點狀與線條樣式之間的意義不同。
- 輸入六位小寫十六進位數值的前景與背景。工具會自動統一大小寫，並在遇到格式錯誤的值時拒絕，而非靜默改寫，因此多打或少打一個字元會看似毫無作用。
- 觀察即時的重複預覽。逐步調整拼貼尺寸與形狀寬度，並同時觀察圖案之間的間距，以及每個圖案相對於背景的視覺權重。
- 如果在小尺寸下預覽看起來正確，請調整瀏覽器視窗大小，或在實際目的地尺寸下測試圖樣。分數縮放與裝置像素比會改變單像素筆畫的渲染方式。
- 確認前景與背景的對比足以符合你的使用情境。如果有文字或 UI 會覆蓋在圖樣之上，請使用對比工具（例如 Color Contrast Checker）驗證可讀性。
- 當結果正確呈現時，複製 CSS 以供內嵌使用、複製獨立的 SVG 標記以供嵌入，或在阻擋資料 URL 的環境中下載拼貼。
看起來像錯誤的色彩與對比問題
一個圖樣即使在幾何上完美，也可能因為色彩而看起來錯誤。以下三種情況會反覆出現。第一個是褪色的圖案：當前景的亮度太接近背景時，點、線或波浪會看起來像雜訊而非刻意的圖案。產生器並不會對此提出警告；它只會強制執行有效的十六進位值。第二個是銳利的邊緣：在對角線或格狀樣式中，高對比的組合會在拼貼邊界處暴露反鋸齒的差異。可以稍微降低對比，或增加形狀寬度，讓反鋸齒邊緣佔筆畫的比例變小。第三個是錯誤的色彩空間：產生器會輸出 sRGB，如果你的目的地使用的是廣色域描述檔，渲染出來的圖樣可能會與色票顯示的不同。請使用在 sRGB 下運作的調色盤工具（例如 Color Palette Generator）來挑選最終色彩。
對於會覆蓋在圖樣之上的文字與 UI 元素，請使用 Color Contrast Checker 驗證可讀性。一個本身看起來具裝飾性的圖樣，在有文字橫跨其上時可能會變得難以閱讀，特別是像小點或細對角線這種高頻率的圖案。
當問題出在目的地而非圖樣時
有許多目的地會拒絕資料 URL，而工具產生的 CSS 使用的是內嵌資料 URL。嚴格的內容安全政策若在 img-src 或 style-src 中禁止 data:，將會靜默阻擋圖樣。會清理樣式屬性的電子郵件用戶端會剝離資料 URL。會竄改內嵌樣式或外部化資產的 CMS 或建置管線會改寫它。出於安全考量，沙箱化的 iframe 可能會阻擋內嵌的資料 URL。在每一種情況下，修復方式都相同：下載 SVG 拼貼、將其作為核准的資產託管於你的網站或 CDN 上，然後將 CSS 中的資料 URL 替換為該資產 URL。CSS 的結構維持不變，只有 background-image 的值會改變。
另一個目的地端的問題是分數的版面縮放。如果使用圖樣的元素寬度為 199.5 像素，而拼貼為 32，瀏覽器將會以非整數的倍數縮放拼貼，單像素筆畫可能會顯得不均勻。請盡量將版面寬度對齊為拼貼尺寸的倍數。下列表格將每一個可見的症狀與產品合約中經過驗證的原因配對，方便快速參考症狀的來源。
| 目的地中的症狀 | 可能的原因 | 處理方式 |
|---|---|---|
| 圖樣完全消失 | CSP、清理器、電子郵件用戶端或 CMS 阻擋了資料 URL | 下載 SVG 拼貼並將其作為核准的資產提供 |
| 下載的檔案小於預覽 | 下載的內容是單一拼貼，而非重複區域 | 讓 CSS 的 background-size 與 background-repeat 涵蓋整個區域 |
| 單像素筆畫看起來不均勻 | 反鋸齒、分數縮放、瀏覽器縮放，或筆畫與拼貼比例過於極端 | 在最終的 CSS 尺寸與裝置像素比下進行測試 |
| 前景看起來褪色 | 前景與背景十六進位值的對比過低 | 挑選對比更高的組合，並使用對比工具進行驗證 |
| 工具忽略輸入值 | 產生器會靜默拒絕格式錯誤的十六進位、未知樣式或超出範圍的值 | 確認使用六位小寫十六進位，以及 8 到 128（拼貼）或 1 到 12（寬度）範圍內的整數 |
Limits of This Generator to Keep in Mind
The generator deliberately produces a single square tile with deterministic geometry. It does not create checkerboards with independently sized cells, custom path uploads, rotations, gradients, masks, animation, or multi-layer compositions. If your wrong result is actually a request the tool was never designed to satisfy, such as a hex grid with two tile sizes or a pattern with three colors, the right fix is a different tool, not a different control value.
A second limit is minification. The output is concise and deterministic but is not aggressively minified. If your pipeline re-minifies or strips attributes from the SVG, the tile may no longer render identically. Always compare the file your pipeline outputs against the markup the tool produced before assuming the pattern is broken. Rebuilding with identical controls produces byte-for-byte identical SVG and CSS, so any deviation in the deployed file came from somewhere in the build chain.
A third limit is rendering-environment variation. The same SVG and CSS can render with slightly different antialiasing in different browsers, at different zoom levels, and at different device pixel ratios. The tool does not guarantee perceptual uniformity or print registration; it guarantees geometry. For the underlying behavior of repeated SVG content, see the MDN reference for the SVG pattern element and the W3C SVG 2 specification on tiled patterns. Note that this implementation exports a standalone tile that CSS repeats, rather than wrapping the motif in an internal <pattern> element, so the visual repeat is performed by background tiling.
Related reading: How to Fix a HEX Color Mix Result That Looks Wrong.