跳至主要內容
Lizely

SVG 範圖生成器

建立一個無縫的 SVG 範圖並複製相符的 CSS，無需上傳資源或撰寫路徑標記。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇圖樣風格、範圖大小、形狀寬度、前景與背景。
  2. 2.在預期使用大小的範圍內檢視重複預覽。
  3. 3.複製 CSS、複製獨立的 SVG 標記，或下載範圖並在目的地的 CSP 下測試。

關於SVG 範圖生成器

SVG 繪圖工具會建立一個小向量圖塊，並顯示其在較大預覽區域中重複的樣子。可選擇點、網格、斜線或波浪等樣式；調整圖塊大小與形狀寬度；然後選擇前景與背景顏色。這個工具會產生三個同步輸出：一個即時重複預覽、獨立的 SVG 圖塊標記，以及包含百分比編碼 SVG 資料 URL 的 CSS，並與背景大小相符。所有內容都在當前瀏覽器分頁中產生，不需上傳任何素材或依賴遠端影象。

範圖大小控制水平與垂直方向的重複間隔。較小的值會讓更多圖案填滿相同空間，較大的值則會留下更多視覺空間。形狀寬度會改變點圖樣的圓點半徑，以及線條圖樣的筆觸寬度。由於這兩種意義不同，相同的數值並不能保證相同的視覺重量。特別是當前景與背景對比強烈時，應以重複預覽為準，而非僅看控制數值。

每種樣式都有確定的幾何結構。點樣式會在方塊圖塊中央放置一個圓形。網格樣式會繪製頂邊與左邊，讓相鄰複製件組合成規則的網格，而不會出現雙倍寬度的內邊線。斜線樣式會產生數條平行線段，跨越圖塊邊界，讓鄰近複製件可以延續條紋的節奏。波浪樣式則使用一個二次曲線，再透過平滑的二次曲線延續至圖塊內。使用相同的控制選項重新建立，會產生與原版完全相同的 SVG 與 CSS 輸出。

SVG 包含明確的寬度、高度、viewBox、完整範圖背景矩形，以及一個圖樣元素。前景與背景顏色皆必須為六位十六進位值，並轉為小寫。範圖大小接受八至 128 像素的整數，形狀寬度則接受一至十二像素的值。介面會限制輸入範圍，而純粹的生成器會獨立拒絕不支援的圖樣、錯誤的顏色與超出範圍的值，不會默默修復。

此 CSS 輸出使用背景顏色、背景圖片與背景大小。圖片值包含經百分比編碼的精確產生 SVG，因此可直接複製貼上，無需額外上傳檔案。此方式適合原型設計、小型裝飾表面、暫時性佔位、標誌、卡片及受控網站主題。然而，即使為 data URL，仍可能因目的地的內容安全策略、過濾器、電子郵件客戶端或內容管理系統而被阻擋。若發生此情況，請下載 SVG 圖格，作為核准資源提供，並以該資源的 URL 取代 data URL。

複製 CSS 與複製 SVG 會分別請求瀏覽器剪貼簿權限。若成功，會顯示已複製的格式。若權限被拒絕，則兩項輸出皆僅為只讀，供手動選擇，且不會宣告成功。下載 SVG 範圖會儲存與標記欄位相同的範圖。預覽並非截圖，下載也非大範圍重複區域；它僅是用來重複的單一原始範圖，以維持檔案緊湊，並讓 CSS 控制覆蓋區域。

縫合品質取決於幾何結構、抗鋸齒、縮放與最終渲染環境。分數縮放或瀏覽器放大可能導致一像素筆觸看起來不均。極大筆觸寬度可能淹沒小範圖，強烈對比的對角線可能在邊界處顯示抗鋸齒差異。建議在最終 CSS 大小與裝置像素比下測試。此工具不保證印刷對齊、紋理隨機性、視覺均勻性、可及性，或與將 SVG 像素化為點陣圖的軟體相容。

此專注的產生器不會產生攝影紋理、雜訊、獨立細胞大小的方格、自訂路徑上傳、旋轉、漸層、遮罩、動畫或多層組合。它也不會將 SVG 縮小至僅保留簡潔的確定性標記。建議使用相關的色彩工具選擇調色盤或驗證對比度，然後保留原始產生設定與專案搭配使用。W3C SVG 2 說明瞭圖樣模式與向量繪圖行為，MDN 檔案則說明 pattern 元素與瀏覽器相容性。此實現輸出為獨立的範圖，作為 CSS 背景圖片使用，而非將圖樣封裝在內部的 SVG pattern 元素中；視覺重複由 CSS 背景圖樣覆蓋完成。

方法與來源

驗證嚴格的圖樣與數值範圍，產生一個正方形的 SVG 範圖，具有確定的圖樣幾何，將該精確字串百分比編碼為 CSS 資料 URL，並保持預覽、標記、CSS 與下載的同步。

常見問題

下載的檔案是整個預覽嗎？
不是。它是緊湊的單一 SVG 範圖；CSS 或圖形軟體會重複該範圖以覆蓋較大區域。
為何 CSS 使用資料 URL？
它將精確的 SVG 範圖嵌入單一宣告中，因此無需額外的圖片請求，雖然網站的 CSP 可能限制資料 URL 的使用。
所有圖樣都會完全無縫嗎？
圖形幾何會跨越或對齊範圖邊界，但抗鋸齒、縮放、分數縮放與極端筆觸與範圖比例可能影響視覺縫合。
會上傳或存放我的圖樣嗎？
不會。預覽、SVG、CSS、剪貼簿寫入與下載準備皆保留在當前瀏覽器標籤頁中。

相關工具

色彩工具 使用指南

查看全部