當你產生 SVG 圖樣後,最快的檢查方式是同一個瀏覽器分頁內並列比較三個同步檢視:即時重複預覽、獨立 SVG 圖塊標記,以及包含百分比編碼 data URL 的 CSS 背景宣告。SVG 圖樣產生器從同一組控制項產出這三項,因此視覺檢查、標記檢查與部署檢查可以並行進行,無需上傳圖塊。由於三個輸出源自相同的輸入,當預覽畫面與標記內容不一致時,代表的是真正的問題,而不是渲染上的怪現象。本文將逐步說明每個輸出實際告訴你的資訊、檢查順序、只有在實際尺寸下才會出現的接縫與對比問題,以及圖樣抵達頁面前可能導致 data URL 被阻擋的位置。本文所述一切都在當前瀏覽器分頁內完成,不會上傳、託管或傳送任何素材到伺服器。
三個需要檢查的同步輸出
產生器同時顯示三個唯讀欄位,並在任何控制項變動時保持同步。請將每一項視為關於同一圖塊的不同類型證據。
- 即時重複預覽:一個以 CSS 平鋪的區域,展示來源圖塊在實際尺寸重複時的樣貌。這是間距、粗細與色彩對比的視覺基準。
- 獨立 SVG 標記:精確的單一圖塊向量來源,包含 width、height、viewBox、覆蓋整個圖塊的背景矩形,以及一個 motif 元素。這就是下載時儲存的內容。
- CSS 背景宣告:background-color、background-image 與 background-size,其中 image 值為百分比編碼的 SVG。這是你貼進樣式表的內容。
三項一起閱讀就是核心檢查。預覽告訴你圖塊看起來是否正確,標記告訴你圖塊在結構上是否符合預期,而 CSS 則告訴你同一個圖塊是否能原封不動地傳遞到目標位置。
如何逐步驗證產生的 SVG 圖樣
這些檢查最好按固定順序進行,從修改成本最低到最高。
- 將圖樣樣式、圖塊尺寸、形狀寬度,以及兩個六位數 HEX 顏色設定為你打算出貨的值。圖塊尺寸接受 8 到 128 像素之間的整數;形狀寬度接受 1 到 12 像素之間的值。
- 在圖樣實際使用的渲染尺寸附近檢視即時預覽。小圖塊放在卡片表面看起來,與同一圖塊拉滿整個主視覺橫幅差異極大。
- 開啟獨立 SVG 標記欄位,確認 width、height、viewBox、覆蓋整個圖塊的背景矩形、單一 motif 元素,以及小寫 HEX 值都與你的選擇一致。
- 複製 CSS 並貼到目標樣式表、沙盒頁面或 HTML 郵件草稿,在實際載入 data URL 的環境中測試。
- 如果 data URL 被阻擋,請點擊 SVG 圖塊下載,並以儲存檔案託管於核准位置的素材 URL 取代 data URL。
你可以視需要重複整個流程。對於先設定控制項再將 CSS 放入頁面的圖塊優先工作流程,關於 如何以圖塊優先工作流程製作 SVG 圖樣 的配套指南與本檢查流程搭配得相當好。
重複預覽中應該觀察的重點
預覽是唯一能同時呈現反鋸齒、分數縮放與對比的地方。圖塊尺寸控制水平與垂直方向的重複間隔:較小的值會在同樣區域內塞入更多 motif,較大的值則會留下更多視覺空間。形狀寬度會改變點狀樣式的點半徑,以及線條樣式的描邊寬度,因此相同的數值並不代表相同的視覺粗細。請檢視重複預覽,而非僅憑控制項數字判斷,特別是在前景與背景對比強烈的情況下。
請在最終 CSS 尺寸與目標裝置像素比下檢查預覽。分數級的版面縮放或瀏覽器縮放可能會讓一像素的描邊看起來不均勻。形狀寬度過大會主導小圖塊並抹除圖樣節奏,而形狀寬度過小配上大圖塊則可能看起來像雜訊而非 motif。當節奏難以辨識時,通常應該調整圖塊尺寸而非更動顏色。
各圖樣樣式在接縫處的表現
每種樣式都有確定性的幾何結構,理解該幾何就能精確知道該在預覽的哪裡檢查。四種樣式在圖塊邊界的表現各不相同,因此接縫檢查並非每種樣式都一樣。
| 圖樣樣式 | 圖塊內含內容 | 預覽中應驗證的事項 |
|---|---|---|
| 點狀 | 一個位於正方形圖塊中心的圓 | 兩個方向上間距均勻;各列之間沒有偏移飄移 |
| 格狀 | 僅有頂邊與左邊 | 相鄰圖塊拼合成規則的格網,四個圖塊交會處不產生雙倍寬的內部線條 |
| 斜線 | 數條跨越圖塊邊界的平行線段 | 相鄰圖塊延續條紋節奏,接縫處不產生斷裂或重疊的條紋 |
| 波浪 | 一條二次曲線加上跨圖塊平滑接續的另一條二次曲線 | 波峰與波谷在水平方向對齊,看起來像一條連續的線 |
在格狀中,刻意只繪製頂邊與左邊正是為了避免四個圖塊交會處出現雙重線條。在斜線中,線段刻意跨越邊界,使下一個圖塊以相同角度接續,不產生可見的階梯。在波浪中,第二條二次曲線負責將跨越右邊的接合處平滑接上下一個圖塊的左邊。
如何確認獨立 SVG 標記
閱讀標記欄位屬於結構性檢查而非視覺檢查。SVG 是從控制項以確定性方式產生,以相同控制項重新產生會得到位元級相同的輸出。在你將圖塊交出去之前,請留意五個具體訊號。
- 正方形圖塊尺寸:width 與 height 與所選圖塊尺寸相符,介於 8 到 128 像素之間(含首尾)。
- 明確的 viewBox:viewBox 涵蓋相同的像素區域,使圖塊在 CSS 調整大小時能乾淨地縮放。
- 覆蓋整個圖塊的背景矩形:背景矩形覆蓋整個圖塊,因此獨立 SVG 在尚未套用任何 CSS 時也能正確渲染。
- 單一 motif 元素:點狀為單一圓形,其餘為 path 或 line,絕不會包裝成內部的 <pattern> 元素。
- 小寫六位數 HEX:兩個顏色統一為小寫,這在你之後比對標記差異或將其送入建置流程時會有影響。
這個獨立圖塊正是 SVG pattern 元素的 MDN 文件 中所描述,作為重複 paint server 基礎的來源。產生器透過 CSS background-repeat 來套用平鋪,而非將 motif 包進內部的 <pattern>,這也是標記能保持精簡且可重現的原因。
CSS data URL 可能失敗的位置與測試方式
data URL 將精確的 SVG 圖塊嵌入單一宣告中,代表不需要額外的圖片請求,也不需要託管素材。這份便利有其代價:即使 SVG 本身有效,目標環境仍可能拒絕 data URL。最常見的阻擋因素包括:在 img-src 或 style-src 中不允許 data: 的 Content Security Policy、會從內嵌樣式中移除 data URL 的 HTML 清理器、阻擋內嵌圖片的郵件客戶端,以及會重寫或移除內嵌樣式區塊的 CMS。當上述任一情況發生時,圖樣會悄悄消失,只剩下 background-color。
解決方式就是下載按鈕。儲存 SVG 圖塊後,你會得到與標記欄位相同的單一來源圖塊,精簡且可直接作為已核准的素材來提供服務。在產生的 CSS 中,將 data URL 替換為素材 URL,保留相同的 background-size,即可在阻擋 data URL 的環境中使用 CSS,而不改變渲染結果。預覽、標記與下載檔案都是同一個圖塊,因此你先前所做的視覺檢查依然適用。
影響視覺檢查的限制
產生器能提供可靠的單一分頁結果,但視覺檢查只有在目標環境才算真正結束。接縫品質取決於幾何、反鋸齒、縮放以及最終的渲染環境。分數級的版面縮放或瀏覽器縮放可能會讓一像素的描邊看起來不均勻。過大的描邊寬度可能主導小圖塊,而對比強烈的斜線在邊界處可能會顯現反鋸齒差異。請在最終 CSS 尺寸與裝置像素比下測試,而不是只相信預覽的預設大小。
此工具不保證印刷套印、紋理隨機性、知覺均勻度、無障礙性,或是與以不同方式光柵化 SVG 的軟體相容。它也無法產生攝影紋理、雜訊、獨立尺寸的棋盤格、自訂 path 上傳、旋轉、漸層、遮罩、動畫或多層合成,因此任何假設具備上述任一能力的視覺檢查都必然失敗。其底層幾何遵循 W3C SVG 2 patterns 規範所描述的模型,該規範為平鋪向量上色設定了預期。若想了解在檢查階段才會出現的更多陷阱,關於 避免在產生 SVG 圖樣時犯錯 的指南涵蓋了預覽無法獨自查出的情況。
最後請記住,你下載的是單一來源圖塊,而不是你在預覽中看到的大面積重複結果。當你檢查檔案大小、比對與先前版本的差異,或是將素材交給設計師時,這個區別至關重要。預覽是平鋪的展示;標記與下載檔案才是交付物。SVG 圖樣產生器 讓三者保持同步,讓你能在同一分頁內執行整套流程,複製目標環境接受的格式,並在每次調整控制項時重新執行。