你可以透過以下方式製作 SVG 圖樣：先產生一個無縫的正方形向量圖磚，將 SVG 以百分比編碼（percent-encoding）寫成 CSS 資料 URL（data URL），再讓 background-image 的平鋪（tiling）把這塊圖磚重複鋪滿任何表面——整個過程不需上傳任何素材，也不必手寫路徑標記。圖樣並不是一張單一圖片，而是一個小型重複單位；瀏覽器會一塊接一塊地把該單位邊對邊地複製，直到完全覆蓋父元素（parent element）。SVG Pattern Generator 會在目前的瀏覽器分頁中建立這個單位，並同步維持四項內容：即時重複預覽、獨立的 SVG 圖磚標記、將百分比編碼後的 SVG 作為 background-image 並搭配對應 background-size 的 CSS，以及同一塊圖磚的下載檔案。圖磚大小控制重複間距，形狀寬度則會依不同樣式改變圖案的視覺比重，前景色與背景色都是六位數的十六進位色（HEX）值，工具會將其標準化為小寫。
為何「以圖磚優先」的工作流程是最短路徑
大多數關於製作 SVG 圖樣的入門教學，都會帶你走過 SVG 的 <pattern> 元素、設定 patternUnits 值，然後在裁切的視口中疊上路徑或圓形。這種做法行得通，但要求你手動撰寫幾何圖形、選擇座標系統，並把標記直接嵌入 HTML，或另外建立一個瀏覽器可以擷取的 SVG 檔案。以圖磚優先的工作流程則完全跳過嵌入的 pattern 元素：你只要製作一塊正方形圖磚、匯出它，然後把重複的工作交給 CSS 的 background-image 與 background-size，這是每個現代引擎都已經理解的語法。從觀察者的角度來看，最終的視覺結果完全相同；但原始碼更簡潔、檔案更小，而且同一塊圖磚能跨頁面重複使用，無論是作為一般素材，或以資料 URL 方式內嵌。
SVG Pattern Generator 採用的是後者這種模式。它內建的四種樣式——圓點（dots）、格線（grid）、斜線（diagonal）與波浪（waves）——各自擁有經過調整的確定性幾何，能與圖磚邊緣對齊或跨越，因此在一般縮放下，相鄰的複本能在不產生內部重複或可見接縫的情況下完成圖樣。根據 MDN 對於 SVG pattern 元素的參考資料，同樣的視覺效果也可以透過內部的 pattern 定義達成，但圖磚加 CSS 的方式完全避免了內嵌的 SVG 標記，讓樣式表保持自足。
每個控制項實際會改變什麼
產生器公開一組固定的輸入選項。了解每個選項的作用，可以避免你因為改錯數值而徒勞無功地追尋「視覺比重」的問題。
- Pattern style（圖樣樣式）：圓點、格線、斜線或波浪。每種樣式都有自己的幾何結構，也各自定義了「形狀寬度」的意義。
- Tile size（圖磚大小）：8 到 128 像素之間的整數。這代表兩個方向上的重複間距。圖磚越小，同樣面積內能容納更多圖案；圖磚越大，視覺上則有更多喘息空間。
- Shape width（形狀寬度）：1 到 12 像素之間的整數。對圓點而言，這是圓的半徑；對格線、斜線與波浪而言，則是筆畫寬度（stroke width）。由於意義不同，相同的數值並不保證相同的視覺比重。
- Foreground and background（前景與背景）：六位數的十六進位色值，並標準化為小寫。背景會填滿整塊圖磚的矩形區域，前景則在圖磚上繪製圖案。
工具內部的純產生器會直接拒絕不支援的樣式、格式錯誤的色彩，以及超出範圍的數值，而不是默默地自行修正。如果你在別處自行封裝了相同的控制項，請比照辦理進行嚴格的驗證，讓使用者得到清楚的回饋，而不是出乎意料的輸出結果。
每種樣式如何配置其幾何結構
| Style | Motif per tile | Edge behavior | Shape-width meaning |
|---|---|---|---|
| Dots | One circle at the tile center | Aligned with neighbors in a regular grid | Circle radius |
| Grid | Top and left edges drawn | Adjacent copies complete a lattice with no double interior lines | Stroke width |
| Diagonal | Several parallel segments | Segments cross tile boundaries so neighbors continue the stripe rhythm | Stroke width |
| Waves | One quadratic curve plus a smooth quadratic continuation | Continuation crosses the right edge into the next tile | Stroke width |
正是這種幾何結構，使得這四種樣式無需額外設定就能適用於「以圖磚優先」的工作流程。圖磚是完整描述重複效果的最小單位，其餘的工作則交由 CSS 處理。
逐步製作 SVG 圖樣
- 在你的瀏覽器分頁中開啟 SVG Pattern Generator——不需要帳號、上傳檔案，也不需要託管任何圖片。
- 選擇一種圖樣樣式（圓點、格線、斜線或波浪），使其符合你要填滿的表面。
- 在 8 到 128 像素的範圍內設定圖磚大小；請記住，這個數值控制圖樣在圖案中心之間的重複距離。
- 在 1 到 12 像素的範圍內設定形狀寬度，請留意圓點樣式把這個值視為半徑，而線條類樣式則將其視為筆畫寬度。
- 為圖案挑選一個前景的 HEX 色，再為圖磚挑選一個背景的 HEX 色。工具會將兩者都標準化為小寫。
- 請大致以圖樣實際呈現的尺寸來檢視重複預覽，而不是以原始的圖磚尺寸來看。圖磚的重複行為在 48 像素時與在 480 像素時看起來會截然不同。
- 若你想要一條帶有百分比編碼的 SVG 資料 URL 並搭配對應 background-size 的簡潔宣告，請複製 CSS；如果你偏好直接內嵌或引用圖磚，則複製獨立的 SVG 標記。
- 若你的目的地（Content Security Policy、清理器（sanitizer）、電子郵件用戶端或內容管理系統（CMS））阻擋了資料 URL，請點擊 Download SVG Tile、將檔案以受信任的素材形式發布，並把 CSS 中的資料 URL 替換成該素材的 URL。
之後以相同的控制項重新產生時，SVG 與 CSS 的輸出會逐位元組完全相同，因此圖樣可以在沒有螢幕截圖或人工清理的情況下被重現。
解讀產生器所提供的四種輸出
| Output | What it contains | When to use it |
|---|---|---|
| Live preview | The single tile repeated to fill a large preview area | Inspect repeat quality and contrast at the real rendering size |
| CSS declaration | background-color, background-image (percent-encoded SVG data URL), background-size | Paste into a stylesheet for prototypes, badges, cards, small decorative surfaces |
| Standalone SVG markup | width, height, viewBox, full-tile background rectangle, one motif element | Inline in HTML, drop into a graphics editor, or save as a .svg file |
| Download SVG Tile | The same compact tile shown in the markup field | Host as an asset when CSP or a sanitizer blocks data URLs |
預覽不是截圖，下載的也不是放大重複後的區域——兩者呈現的都是同一塊原始圖磚。讓檔案保持精簡，並讓 CSS 控制覆蓋區域，正是這個格式之所以能夠輕量傳輸的原因。
當資料 URL 不夠用的時候
資料 URL 把所有東西都集中在一個宣告裡，這對於原型設計、小型裝飾性表面、預留位置、徽章、卡片，以及受到嚴格控管的網站主題來說都很方便。這段 CSS 使用了 background-color、background-image 與 background-size，其中 image 的值是經過百分比編碼後的完整 SVG——因此瀏覽器完全不需要發出額外的檔案請求。這種便利有其上限。目的地的 Content Security Policy 可能會拒絕資料 URL，CMS 內部的清理器也可能會把它們移除，而許多電子郵件用戶端的處理方式更是不一致。當這些環境拒絕內嵌的形式時，請下載 SVG 圖磚、將其從目的地信任的路徑發布，然後把 CSS 中的資料 URL 替換成該素材的 URL。由於 background-size 仍然控制圖磚的鋪設距離，重複行為不會改變。
為什麼預覽比數字更重要
由於形狀寬度在不同樣式中代表不同的意義，僅憑控制項的數字來判斷結果是一種錯誤，特別是在前景與背景對比強烈的情況下。預覽才是唯一的事實來源。請調整輸入值，並以圖樣在實際使用環境中大約呈現的尺寸來檢視重複結果。接縫品質同時也取決於幾何結構、抗鋸齒（antialiasing）、縮放方式以及最終的渲染環境。非整數的版面縮放或瀏覽器縮放，可能會讓一像素的筆畫顯得不均；過大的筆畫寬度可能會在小圖磚上喧賓奪主；對比強烈的斜線則可能會在圖磚交界處顯現抗鋸齒的差異。請以你最終要發布的 CSS 尺寸與裝置像素比（device pixel ratio）進行測試。若出現接縫，請降低形狀寬度、提高圖磚大小，或調整色彩對比，讓邊界在視覺上淡化。W3C SVG 2 規範中關於平鋪圖樣的章節 涵蓋了底層的繪製行為，但實務上的原則始終不變：務必在圖樣實際呈現的位置檢視其重複效果。
產生器刻意不做的事
這是一個專注於核心功能的工具，而不是通用的圖樣編輯器。它不會產生照片紋理、雜訊、可獨立調整格數的棋盤格、自訂路徑上傳、旋轉、漸層、遮罩、動畫或多層組合。它也不會在原本就精簡的確定性標記之外對 SVG 進行額外的壓縮（minify），更不會把圖案包進內部的 SVG pattern 元素中——視覺上的重複效果是透過 CSS 的 background 平鋪來達成。這個工具不保證印刷套印精度、紋理隨機性、知覺均勻性、無障礙（accessibility）相容，或與其他以不同方式將 SVG 點陣化的軟體相容。如果你需要一個對比安全的文字背景，請把產生的圖樣視為裝飾用途，並另外使用像 Color Contrast Checker 這樣的工具來驗證你的文字與背景配對，最後保留產生器原本的設定值與你的專案一起存放。
延伸閱讀：Complementary Colors for Illustrator: A Browser Workflow。