若要從零開始產生 SVG 圖樣，你只需建立一個小型的向量標記方塊（tile），再交由 CSS 將它重複平舖到你想要填滿的表面上，這樣不僅能讓幾何結構保持精簡，輸出也與解析度無關。大多數讀者接觸到這個任務時，通常是為了替卡片製作帶有紋理的背景、為主視覺區塊（hero section）準備一個佔位圖、為徽章設計細緻的圖案，或為主題網站建立一個可控的裝飾圖層，而這些用途最乾淨的起點都是「一個 tile 加上 CSS 重複規則」。瀏覽器內的產生器讓你可以用點選的方式挑選 tile，而不是手寫 SVG，然後提供三個同步產出的成品——即時重複的預覽、獨立的 SVG 標記，以及 CSS——你可以檢視外觀、部署原始碼，或下載成可攜的資產，端看圖樣將用於何處。第一次操作時，所有內容都不必離開你的分頁：預覽、標記欄位、CSS 欄位與下載功能都在本機端完成；如果你的內容無法上傳到第三方服務，這樣的離線限制反而是一個有用的起點。

how do i get started when i need to generate svg pattern
SVG 圖樣產生入門

「入門」對 SVG 圖樣而言代表什麼

SVG 圖樣其實比看起來更容易上手，因為模型非常一致：每個輸出都是「一個 tile 加上一條重複規則」。產生器提供的四種樣式——圓點、格線、對角線和波浪——都共用同一個「以 tile 為先」的心智模型，所以第一個決策並不是「我該怎麼畫波浪」，而是「波浪應該存在於多大的 tile 中」。一旦決定了 tile 大小，剩下的工作就是為表面挑選合適的樣式與配色組合，再匯出目標環境能接受的任一成品。

「以 tile 為先」的思考方式也能讓迭代更快。如果圖樣看起來不對，你幾乎從來不需要重新設計圖案本身；你只需要調整 tile 大小、稍微改變形狀寬度，或挑選新的前景色。幾何結構是確定性的（deterministic），所以相同的輸入必定產生相同的 tile，這就是為什麼一筆「圓點、32 px、寬度 4、1f6feb 配 f6f8fa」的筆記，幾週後依然能毫無意外地還原出同一個圖樣。

你會最先遇到的控制項

介面上只有少數幾個控制項，每個都各司其職，因此最初幾分鐘的重點在於理解它們會改變什麼，而不是是否要使用它們。

  • 圖樣樣式（Pattern style）：圓點、格線、對角線或波浪。每種樣式都具備確定性的幾何結構，這代表相同的控制項數值永遠會產生相同的 tile。
  • Tile 大小（Tile size）：介於 8 到 128 像素之間的整數，同時控制水平與垂直方向的 repeat 間距。數值越小，同樣面積內排列的圖案越多；數值越大，視覺留白越多。
  • 形狀寬度（Shape width）：介於 1 到 12 像素之間的數值。對於圓點樣式，它代表每個圓形的半徑；對於格線、對角線和波浪，它代表線條的粗細（stroke width）。由於這幾種樣式的意義不同，即使數值相同，實際呈現的視覺重量也不一定相等。
  • 前景與背景顏色（Foreground and background colors）：六位數的十六進制色碼（HEX），以小寫儲存。這是 tile 中僅有的兩個顏色。

介面會將一般輸入限制在這些範圍內，因此在你點選操作的過程中，數值不會在不知情的狀況下超出範圍。純粹的產生器——適合用於以程式碼編寫設定的情境——則會獨立地拒絕不支援的樣式、格式錯誤的顏色與超出範圍的數值，而不會默默修正它們；如此一來，錯誤的輸入會產生明確的失敗訊息，而不是悄悄被「修正」。

控制項可接受的值實際會改變的內容
圖樣樣式圓點、格線、對角線、波浪Tile 中使用的幾何結構類型
Tile 大小8 – 128 px（整數）水平與垂直方向的 repeat 間距
形狀寬度1 – 12 px圓點樣式代表圓點半徑；以線條為基礎的樣式代表線條粗細
前景6 位數 HEX，小寫Tile 中圖案的顏色
背景6 位數 HEX，小寫Tile 的背景顏色

用幾個點擊完成你的第一個圖樣

一旦你了解每個控制項的作用，整個工作流程其實很短。下列步驟將帶你走完一次首次操作 SVG Pattern Generator 的過程，讓你看見決策是如何層層堆疊的。

  1. 挑選圖樣樣式。從視覺上最符合你想填滿的表面用途的樣式開始——圓點與格線適合中性的紋理、對角線帶有方向感、波浪則給予柔和的節奏感。
  2. 選擇 tile 大小。Tile 大小若大約等於你想填滿區域的最小邊長，通常會呈現細緻的細節；若約為該邊長的四分之一，則會呈現明顯的重複感。任何介於 8 到 128 像素之間的數值皆為有效值。
  3. 設定形狀寬度。先從 1 – 12 範圍的中間值開始，並在下一步之後再進行微調。在確認重複預覽之前，不要急著決定最終數值。
  4. 輸入前景與背景的 HEX 值。請以六位數輸入，例如前景為 1f6feb、背景為 f6f8fa。產生器會自動將兩者統一為小寫。
  5. 在接近實際使用的大小下檢視重複預覽。請依據目的地預期的尺寸與裝置像素比（DPR）來判斷節奏、視覺重量與對比，而不是以全螢幕大小來觀察。
  6. 複製 CSS、複製獨立 SVG，或下載 tile。挑選與目的地限制最相符的任一成品；每種成品都會在下一節中介紹。

相同的輸入永遠會產生相同的輸出：以完全相同的控制項重新製作時，產生的 SVG 與 CSS 會達到位元層級（byte-for-byte）的完全一致——這正是日後能依據筆記重現圖樣時所需要的特性。

複製之前先看懂預覽

在首次使用時，重複預覽是最有用的畫面，因為它呈現的是 tile 在實際情境中的樣子，而非孤立狀態。養成兩個習慣會很有幫助。

  • 以預覽為準來判斷形狀寬度，而非單看數字。對於圓點，形狀寬度代表的是半徑，所以數值 4 會產生直徑 8 像素的圓形；對於格線、對角線和波浪，形狀寬度代表的是線條粗細，所以數值 4 會產生 4 像素粗的線條。相同的數字在不同樣式下，視覺重量可能偏重或偏輕。
  • 在調整數值之前先觀察對比。前景與背景顏色對比強烈時，視覺重量會被放大；因此，在柔和色調上看起來剛好的線條，放在純白底色上可能會顯得刺眼。

如果你的目的地會進行縮放或變焦，請以接近該尺寸的大小來檢視預覽。分數倍縮放與瀏覽器縮放可能會讓 1 像素的線條看起來不均勻；非常粗的線條在小 tile 中可能會過於搶眼；而對比強烈的對角線則可能在 tile 接縫處暴露出反鋸齒（antialiasing）的差異。本工具並未宣稱能在所有環境下都呈現完美的渲染結果，因此以最終的 CSS 尺寸與裝置像素比進行測試，才是最可靠的檢查方式。

將圖樣放到你的網頁上

產生器會提供三個同步的輸出，而選擇正確的輸出也是乾淨入門的一部分。

CSS（以 data URL 形式）。CSS 欄位包含單一宣告，使用了 background-color、background-image 與 background-size，其中 SVG tile 經過百分比編碼（percent-encoded）後直接嵌入 image 的值內。這代表不需要額外的圖片請求、不必經過資產管線（asset pipeline），也沒有外部代管的步驟——這對於原型設計、小型裝飾表面、佔位圖、徽章、卡片以及主題風格強烈的頁面來說，都是非常實用的預設選擇。background-size 會對應到你所選擇的 tile 大小，因此當你在控制項中更改 tile 大小時，CSS 也會同步跟著改變。例如，一個 32 像素、shape width 4 的 tile 會產生 background-size: 32px 32px 的規則，而正是這種精確的對應關係，確保了預覽與實際結果一致。

獨立 SVG 標記。標記欄位包含來源 tile：具有明確 width、height、viewBox 的 SVG 元素、一個覆蓋整個 tile 的背景矩形，以及一個 motif 元素。當你需要將 tile 嵌入另一個 SVG、檢查幾何結構，或交給設計師時，可以使用這段標記。

下載的 SVG tile。下載的內容是單一來源 tile，而非預覽畫面的截圖。這能讓檔案保持精簡，並由 CSS 控制覆蓋的範圍。當目的地不允許使用 data URL 時（某些目的地會透過內容安全政策（Content Security Policy）、清理器（sanitizer）、電子郵件用戶端或內容管理系統（CMS）阻擋內聯的 data URL），下載就是正確的選擇。在這種情況下，請將下載的 tile 作為已核准的資產來提供，並用該資產的網址替換掉 data URL。

複製 CSS 與複製 SVG 會分別請求剪貼簿權限，因此其中一項被拒並不會影響另一項。複製成功時，畫面會顯示一則訊息指出已複製的格式；若權限遭拒，兩個唯讀輸出仍會保持可見，供手動選取，且不會顯示「成功」的假訊息。

如果你想了解「tile 加 CSS」的做法與在 SVG 內部使用 <pattern> 元素的做法有何不同，可以參考 MDN 的 SVG pattern 元素參考資料 以及 W3C SVG 2 規格中有關 patterns 的說明，其中介紹了較早期的內部 pattern 做法；本產生器匯出的是獨立的 tile，並交由 CSS 執行視覺上的重複，這種方式更易於嵌入，也更便於日後覆寫。

這個產生器刻意省略的部分

一開始就了解限制能節省時間。這個聚焦型的產生器並不會產生照片紋理、雜訊、各格獨立大小的棋盤格、自訂路徑上傳、旋轉、漸層、遮罩、動畫或多層合成，也只會將 SVG 精簡為簡潔且確定性的標記，不會再進一步壓縮。如果你的設計需要上述任何一項功能，請把本工具視為起點的 tile，並在其餘工具中完成剩下的工作——例如，再疊加一層背景、套用外部的 transform，或將這個 tile 與另外產生的漸層組合使用。

它同樣也不保證印刷套印（print registration）、紋理隨機性、感知上的均勻性或無障礙（accessibility）效果；不同的軟體在將 SVG 進行點陣化（rasterize）時，可能會讓同一個 tile 產生略有不同的渲染結果。請使用相關的色彩工具來挑選配色或驗證對比——若你打算在圖樣上疊加文字，Color Contrast Checker 會是正確的下一步——之後請將原始設定一併保留在你的專案筆記中，這樣日後就能完全重現同一個 tile。

首次使用時值得了解的常見陷阱

以下是初次使用時最常出現的問題，每個問題都有小幅調整可以解決。

  • 筆觸看起來不均勻。 這可能是因為在分數縮放比例下看到的是一或兩個像素的筆觸。可以稍微調高形狀寬度，讓筆觸在四捨五入後仍保留下來；或是在最終目標尺寸下測試後再下判斷。
  • 點的視覺重量比預期重。 請注意形狀寬度對點而言是半徑。設定值為 6 時，會產生直徑 12 像素的形，這比相同數值用於線條時感覺更重。
  • 圖樣在預覽中看起來很好，但實際套用到頁面上卻走樣。 請檢查目標環境的內容安全政策 (Content Security Policy)，以及任何會移除內嵌 data URL 的清理機制。若內嵌形式被阻擋，請下載圖塊並以一般資源方式提供。
  • 顏色未如輸入般顯示。 兩個顏色都會被標準化為小寫的六位數 HEX。若您貼上的是簡寫或具名顏色，請重新輸入為完整的六位數十六進位色碼。
  • 下週無法重現相同的圖塊。 請儲存所選的樣式、圖塊大小、形狀寬度以及兩個 HEX 值。以相同的輸入重新產生，可以得到位元層級完全一致的輸出，因此只需做個簡短筆記即可。

若想更深入了解首次產生後應檢查的項目，驗證工作流程指南會以更嚴謹的視角，帶您走過相同的預覽與複製流程，特別著重於邊界情況。

相關閱讀：如何開始在線上混合兩種 HEX 顏色。