產生 SVG 圖樣的最佳方式，是先建立一個無縫拼接的單一圖塊，然後讓 CSS 在你想填滿的表面上重複它。以圖塊為優先的工作流程，能將幾何運算、色彩選擇與樣式設計，全部封裝在一個正方形之內，便於匯出為獨立標記、下載成檔案，或貼成 CSS 的 data URL 格式。你首先選擇一種圖樣風格、設定圖塊大小與圖形寬度，再挑選兩個六位數的十六進位色碼作為前景與背景。接著，一個在瀏覽器端運作的 SVG 圖樣產生器會同時輸出三項同步結果：即時重複的預覽、獨立的 SVG 圖塊標記，以及一段 CSS 宣告──它會將完整的 SVG 進行百分比編碼，並透過 background-size 控制圖塊的重複方式。由於每一步都在當前的分頁內完成，因此不會上傳任何影像檔案、不會託管任何素材，也不必手動撰寫任何路徑標記。結果具備可重現性──以相同的控制項重新產生時，SVG 與 CSS 會逐位元組完全相同──這讓你在原型、卡片、徽章與佔位元素之間，輕鬆維持一致的外觀。
對 SVG 圖樣而言，「最佳」真正的含義
有幾種方法都能產生拼接式 SVG 圖樣，但它們在上傳風險、可攜性，以及修改單一主題樣式的容易程度上有所不同。一個有用的評比方式，是比較四項特性：是否全程留在你的瀏覽器內、輸出是否具確定性、預覽、SVG 與 CSS 是否保持同步，以及結果是否能整齊地放入 CSS 背景中。以單一正方形圖塊產生、同時匯出獨立標記與百分比編碼 CSS data URL 的圖樣，能滿足全部四項。幾何結構鎖定在圖塊內，預覽畫面反映的是與匯出相同的控制項，而 CSS 中沒有另外的影像請求。將影像上傳到遠端伺服器，或依賴外部託管素材的方法，會在隱私與可攜性測試上失敗。至於需要在大張 SVG 文件中手寫 <pattern> 標記的方法，則在便利性測試上不適用──特別是對於希望直接將整齊圖塊放進 CSS 的設計師而言。
常見的 SVG 圖樣產生方式
下表將設計師常用的方法，與上述四項特性進行比較。
| 方法 | 全程留在瀏覽器內 | 確定性輸出 | 無檔案上傳 | 可直接使用的 CSS data URL |
|---|---|---|---|---|
| 在大張 SVG 中手寫 <pattern> | 是 | 僅在謹慎撰寫時成立 | 是 | 否──需要另一個獨立檔案 |
| 將點陣圖樣轉為 base64 | 是 | 否 | 是 | 是，但結果是點陣圖而非 SVG |
| 第三方託管的 SVG 素材 | 視託管方而定 | 視託管方而定 | 否 | 否──需要獨立的影像請求 |
| 瀏覽器端、以圖塊優先的 SVG 產生器 | 是 | 是 | 是 | 是 |
以圖塊優先的瀏覽器產生器，正位於這四項理想特性的交集。預覽畫面是從同一個圖塊重複而成、你複製的 SVG 就是那個圖塊本身、CSS 也將同一個圖塊嵌入為百分比編碼的 data URL。這種三方同步相當少見，因為多數其他方法總是逼迫你在「存在磁碟上的素材」與「得手動維護的行內程式碼」之間二擇一。如果你想要從不同角度切入這個選擇，請參考 如何判斷你是否需要產生 SVG 圖樣。
如何逐步產生一個整齊的 SVG 圖樣
- 挑選一種圖樣風格──點陣、格線、對角線或波浪──並確認圖塊的幾何設定適合你想覆蓋的表面。
- 將圖塊大小設在 8 到 128 像素之間；數值越小，同一區域內能塞進越多主題元素，數值越大則保留越多視覺留白。
- 將圖形寬度設在 1 到 12 像素之間；在點陣風格中，這代表圓的半徑；在線條風格中，這代表筆畫粗細。因此即使數字相同，視覺效果會因風格而異。
- 挑選一組六位數的十六進位色碼作為前景（主題）色，再挑選另一組六位數的十六進位色碼作為背景色；兩者皆會被標準化為小寫。
- 大約以實際會使用的尺寸檢視重複預覽，因為同一個圖塊在縮放後，以及在最終的裝置像素比下，會呈現不同的樣貌。
- 在原型階段複製 CSS、需要行內使用時複製獨立 SVG 標記，或在目的地的 CSP 限制 data URL 時，下載 SVG 圖塊並以核准素材的形式加以託管。
- 將 CSS 貼進你的樣式表，或引用已下載的圖塊 URL──接著在目的地重新測試結果，確認接縫、抗鋸齒與對比都表現正確。
正確解讀四種風格
產生器提供四種風格，各自有確定性的幾何設定，使運算結果可以預測。點陣會在正方形圖塊的正中央繪製一個圓；格線僅繪製頂端與左側邊緣，因此相鄰圖塊會自動構成規則的格網，而不會出現寬度重複的內部線條；對角線則會建立數條穿越圖塊邊界的平行線段，使相鄰的複製區塊能延續條紋節奏；波浪則使用一段二次曲線，並在其後接上平滑的二次曲線延伸跨過圖塊。由於每種風格都鎖定在單一圖塊內，以完全相同的控制項重新產生時，SVG 與 CSS 會逐位元組完全相同。如果你希望在不同位置使用相同的圖樣，只要在兩處貼上同一段 CSS 即可──無論不同時段或不同團隊成員之間，都不會產生重複上的偏差。
圖塊大小與圖形寬度並非同一個維度
這兩項控制項都接受整數像素值，但意思不同，而這個差異在你更換顏色時就會變得重要。圖塊大小是水平與垂直方向上的重複間距，因此一個 32 像素的圖塊代表主題元素在兩個方向上皆每 32 像素重複一次。圖形寬度則會改變點陣風格的圓點半徑，以及線條風格的筆畫粗細──也就是說，圖形寬度為 4 的點陣會產生小小的實心圓，而圖形寬度為 4 的對角線則會產生一條粗線。由於兩者所代表的意義不同，相同的數值並不保證相同的視覺份量。請檢視重複預覽而非僅憑控制項數字判斷，特別是在前景與背景對比強烈的情況下。如果你需要驗證視覺密度，大約以實際使用尺寸檢視重複預覽，並在需要數值時參考圖塊大小控制項。
當 data URL 無法載入時
此工具所產生的 CSS 會使用 background-color、background-image 與 background-size，其中 image 內含百分比編碼後的完整 SVG。這十分方便，因為 CSS 無需額外的影像請求即可套用，非常適合原型、小型裝飾表面、佔位元素、徽章、卡片，以及受控的網站主題。然而 data URL 仍有可能被目的地的規則拒絕。嚴格的內容安全政策 (CSP)、消毒機制、電子郵件用戶端或內容管理系統都可能封鎖 data URL。一旦發生，請下載 SVG 圖塊、改由允許的來源提供，然後將 CSS 中的 data URL 替換為素材 URL。下載的檔案是精簡的單一來源圖塊，而非大面積的重複區塊，因此體積保持輕巧，而實際覆蓋的範圍則由目的地的 CSS 控制。
快速的接縫與抗鋸齒檢查
接縫品質取決於四項因素：幾何、抗鋸齒、縮放與渲染環境。以圖塊優先的產生器所輸出的幾何結構，會跨越或對齊於圖塊邊界，因此運算本身是正確的；仍可能產生差異的是最終的視覺結果。小數點以下的排版縮放或瀏覽器的縮放功能，可能讓僅一像素的筆畫看起來不平整。過大的筆畫粗細可能在小圖塊中喧賓奪主，對比強烈的對角線也可能在圖塊邊界顯現抗鋸齒的差異。請在最終的 CSS 尺寸與裝置像素比下測試之後，再正式採用此圖樣。產生器並不保證印刷套印準確度、紋理隨機性、知覺均勻度、無障礙對比，或與以不同方式將 SVG 點陣化的軟體之間的相容性──這也是最終目視測試不可或缺的原因。若你需要保證文字疊在圖樣上的對比比例，請在採用前先將前景與背景色組合送入 色彩對比檢查器 檢測。至於主題與背景色彩方面更全面的決策，請先使用 配色產生器 建立一組搭配的調色盤，讓圖樣融入一套經過設計的系統，而不是單獨挑選顏色。
以圖塊優先的產生器不做哪些事
這個聚焦的產生器只專注於一件事。它不會建立攝影紋理、雜訊、每格大小可獨立調整的棋盤格、上傳自訂路徑、旋轉、漸層、遮罩、動畫或多層合成。除了簡潔的確定性標記之外，它也不會對 SVG 進一步壓縮。如果你需要這些功能，請在工具之外另行處理──它所輸出的 SVG 與 CSS 已經相當整潔，足以直接閱讀與手動編輯。W3C SVG 2 說明了拼接圖樣與向量繪製行為（請參考 W3C SVG 2 patterns），MDN 則記載了 pattern 元素與瀏覽器相容性（請參考 MDN SVG pattern element）。此實作輸出的是作為 CSS 背景影像使用的獨立圖塊，而非將主題樣式包裹在內部 SVG pattern 元素之中；視覺上的重複效果由 CSS 的背景平鋪機制負責。
延伸閱讀：CSS 核取方塊產生器會產生什麼輸出。