SVG圖案產生器

混搭圖案類型、尺寸、間距、旋轉、偏斜與色彩，直接在瀏覽器內打造可投入專案的SVG紋理。

條紋

SVG尺寸:0.53 KB

SVG程式碼

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" role="img">
      <defs>
        
        <pattern id="_R_2npfiv9flb_" patternUnits="userSpaceOnUse" width="28" height="28" patternTransform="rotate(45)">
          <rect width="28" height="28" fill="#c3d4ff" />
          <rect width="6" height="28" fill="#667eea" />
        </pattern>
      
      </defs>
      <rect width="100%" height="100%" fill="#f7f8fc" />
      <rect width="100%" height="100%" fill="url(#_R_2npfiv9flb_)" opacity="0.9" />
    </svg>

圖案控制

相似圖片工具

查看全部

格式轉換

JPEG、PNG、WebP、BMP、GIF 格式互轉，支援品質控制。

轉ICO圖示

將圖片轉換為ICO格式，支援多種常見尺寸選擇。

圖片加浮水印

為圖片批量/平鋪新增文字浮水印，支援角度、顏色與透明度。

SVG圖案產生器指南

工具介紹

在瀏覽器中快速產生條紋、網格、波浪、圓點或三角等向量紋理。可自由調整間距、顏色、透明度與角度，並立即匯出可用的SVG程式碼。

使用步驟

選擇想要的圖案類型並即時預覽畫布效果
設定畫布寬高、間距以及線條/圓點尺寸，以符合佈局需求
調整顏色與透明度，讓圖案與品牌配色一致
（條紋模式）使用角度滑桿製造不同傾斜效果
複製SVG程式碼或直接下載檔案，用於網頁與設計

使用提示

較小的間距搭配低透明度適合做細緻背景；想要醒目效果時可放大間距並提高顏色對比。

常見問題

注意事項

極端的畫布尺寸或間距會增加瀏覽器渲染成本
如需漸層等效果，可在下載後自行編輯SVG
放在文字背景時請注意對比度，確保可讀性
匯出的SVG會沿用當前畫布尺寸，下載前可先調整寬高

工具導航