SVG 背景纹理生成器
SVG 背景纹理生成器（背景图案生成器），是指从波点、条纹、网格、蜂窝、回纹等内置图案库中挑一种，调好格子大小、粗细、颜色与旋转角，生成可无缝平铺的 SVG 纹理并导出 CSS 背景代码的前端工具。它免费、无需注册，可复制 CSS 背景、SVG 单元格或整幅 pattern 代码，也能下载 PNG 背景图；越过格子边缘的图形会自动补到对边，平铺不露接缝。计算全在浏览器本地完成，内容不上传。
线条
点
几何
传统纹样
- 单元格 40×40 px
- 图案覆盖率约 5.1%（采样估算）
- CSS 代码 URL 编码 346 字节，Base64 403 字节（多 16%）
三行声明直接粘进样式表；底色单独写在 background-color，改底色不用重新生成
background-color: #f5f7ff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%234f6bed' stroke='%234f6bed' stroke-width='0' stroke-linecap='butt' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E");
background-size: 40px 40px;取值范围：格子宽度 8~200px，粗细 5~95，不透明度 0~100%。PNG 输出 1920×1080 像素。
如何使用SVG 背景纹理生成器
在图案库里点一种纹理：波点、条纹、网格、蜂窝、回纹等，预览区立即铺满。
调格子宽度、粗细、颜色与不透明度；条纹、网格这类方形图案还可以选旋转角度。
复制 CSS 背景代码、SVG 单元格、整幅 SVG 或 Tailwind 写法，或下载 SVG、PNG 背景图。
关于SVG 背景纹理生成器的常见问题
- SVG 背景纹理生成器会把我的配色上传到服务器吗？
- 不会。图案由内置的几何规则在浏览器本地现算，SVG 与 CSS 在本地拼装，PNG 在本地画布上绘制后直接下载，没有任何内容发往服务器。本工具只在本地存储里记住导出标签、编码方式、PNG 尺寸这类展示偏好，图案、颜色与格子尺寸都不保存。
- 手机浏览器里怎么用 SVG 背景纹理生成器？
- 手机上直接打开本页即可：图案库的缩略图按钮与滑杆都能触控操作，按钮命中区按 44px 设计，角度档位会自动换行。复制的 CSS 代码可以粘到备忘录里发给电脑；下载的 SVG 与 PNG 会进系统的下载目录。窄屏下参数区与预览区改为上下排列。
- 背景纹理生成器做出来的图案可以商用吗？
- 图案不是来自素材库，而是由内置的几何规则按你选的参数在本地现算出来的，波点、网格、回纹这类纹样本身也是通用几何图形，本站对生成结果不主张任何权利，可以用在网页、海报或应用界面里。本站不提供法律意见，若项目对素材来源有严格审查，请以你所在团队或法务的要求为准。
- 怎么用背景纹理生成器做网页波点和网格背景？
- 先在图案库里点「波点」或「网格」，调好格子宽度与颜色，然后复制「CSS 背景」那三行贴进容器的样式里即可。默认波点的三行是 background-color、background-image 与 background-size：图案被编码成一行 data URI 放进 background-image，background-size 就是格子宽高（默认 40px），浏览器会自动横竖重复铺满整个元素。
- 背景图案平铺时出现接缝怎么办？
- 接缝多半是图形越过了格子边缘却没有在对边补齐：平铺时被裁掉的那一半找不回来，就会露出断口。本工具生成每个格子时都会检查图形的外框，越过哪条边就在对边补一份平移副本，平铺后残片正好拼回完整图形。若只在旋转后的纹理里看到极细的缝，那是小数像素的抗锯齿，改用整幅 SVG 或下载 PNG 即可。
- 背景纹理能斜着铺吗？角度为何是 26.57° 这种数？
- 能，条纹、网格等 17 种方形图案可以旋转。CSS 背景只会沿水平和竖直方向重复，所以只有旋转后仍能找到「横平竖直」重复单元的角度才行：当 tanθ 是两个整数之比 p/q 时，重复单元的边长是格子宽 × √(p²+q²)。26.57° 就是 tanθ = 1/2 的角度，默认 40px 的格子旋转后重复单元为 89.443px，背景尺寸会自动换算好。
- SVG 背景纹理生成器导出的 CSS 怎么改底色？
- 直接改 background-color 那一行就行。本工具把底色单独写成 background-color，而图案本身的 SVG 里不画底色，所以改底色不用重新生成。图案颜色写在 data URI 里，外部 CSS 改不了，需要换图案色就回本页改好再复制一次。勾选「透明底」时不输出 background-color，纹理会叠在元素原有的背景上。
- SVG pattern 和 CSS 背景图有什么区别？
- CSS 背景图是把一个单元格的 SVG 编码进 background-image，由浏览器负责横竖重复，好处是不改 HTML、改底色方便。SVG pattern 是在一个内联 SVG 里用 pattern 元素定义单元格，再用它填满一个矩形，适合直接写进 HTML，旋转时直接写 patternTransform，任意尺寸都能铺满。两者用的是同一套图形，看起来一样。
- 背景纹理生成器能导出透明背景的 PNG 吗？
- 能。勾选「透明底」后下载的 PNG 只有图案本身，其余部分透明。PNG 提供电脑壁纸、手机壁纸、分享封面与方图四种尺寸，可选 1 倍或 2 倍；格子很小、图又很大时 2 倍会被禁用，以免浏览器卡顿。PNG 是位图，放大会糊，网页背景请优先用 CSS 或 SVG。要把已有的 SVG 文件转成 PNG，请到姊妹站的图片工具处理。
SVG 背景纹理生成器图案速查表
本工具也叫 SVG pattern 生成器、网页背景纹理生成器或 CSS 背景代码生成工具，英文里常被叫作 svg pattern generator、background pattern generator 或 seamless pattern 工具。图案库共 24 种，分线条、点、几何与传统纹样四组。波点背景是最常用的一种，网格背景与方格纸适合做笔记和后台界面的底纹，格子布做出的格子背景有棉布格纹的感觉，棋盘格背景常用来表示透明区域，六边形蜂窝背景适合科技感的页面，传统纹样里有回纹、铜钱纹（古钱纹）与窗格纹。
| 图案 | 分组 | 单元格比例 | 能否旋转 | 粗细控制什么 |
|---|---|---|---|---|
| 条纹 | 线条 | 正方形 | 能 | 条纹带占格高的比例 |
| 网格 | 线条 | 正方形 | 能 | 线宽 |
| 方格纸 | 线条 | 正方形 | 能 | 大格线宽（小格线宽为其一半） |
| 交叉斜线 | 线条 | 正方形 | 能 | 线宽 |
| 波浪线 | 线条 | 宽是高的 2 倍 | 不能 | 线宽 |
| 锯齿线 | 线条 | 宽是高的 2 倍 | 不能 | 线宽 |
| 格子布 | 线条 | 正方形 | 能 | 色带宽度 |
| 波点 | 点 | 正方形 | 能 | 圆点半径 |
| 交错波点 | 点 | 正方形 | 能 | 圆点半径 |
| 圆环 | 点 | 正方形 | 能 | 环的线宽 |
| 加号 | 点 | 正方形 | 能 | 十字的臂粗 |
| 叉号 | 点 | 正方形 | 能 | 线宽 |
| 小菱形点 | 点 | 正方形 | 能 | 菱形大小 |
| 棋盘格 | 几何 | 正方形 | 能 | 不适用（固定各占一半） |
| 菱形格 | 几何 | 正方形 | 能 | 线宽 |
| 三角形 | 几何 | 高 = 宽 × √3/2（正三角） | 不能 | 三角形在格内的缩放比例 |
| 六边形蜂窝 | 几何 | 高 = 宽 × √3（六边形） | 不能 | 线宽 |
| 鱼鳞 | 几何 | 宽是高的 2 倍 | 不能 | 线宽 |
| 砖墙 | 几何 | 宽是高的 2 倍 | 不能 | 砖缝宽度 |
| 立体方块 | 几何 | 高 = 宽 × √3（六边形） | 不能 | 不适用（三个面按深浅铺满） |
| 同心方块 | 几何 | 正方形 | 能 | 方框线宽 |
| 回纹 | 传统纹样 | 正方形 | 能 | 线宽 |
| 铜钱纹 | 传统纹样 | 正方形 | 能 | 线宽 |
| 窗格纹 | 传统纹样 | 正方形 | 能 | 窗棂线宽 |
粗细的取值范围是 5~95，格子宽度 8~200px。默认的波点纹理（40px 格子）覆盖率约 5.1%，复制到的 CSS 背景图案直接粘进样式表就能用：
background-color: #f5f7ff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%234f6bed' stroke='%234f6bed' stroke-width='0' stroke-linecap='butt' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E");
background-size: 40px 40px;为什么这里的纹理平铺不会露接缝
背景平铺的本质是把一个单元格横竖复制，所以单元格的左边必须和右边接得上、上边必须和下边接得上。圆点、斜线或六边形的边一旦越过格子边缘，越出去的部分会被裁掉；如果对边没有补上同样的那一块，平铺后就会在格子交界处看到断口，这就是常说的接缝。
本工具对每个图形都先算外框（描边要把半个线宽算进去，圆弧要算上落在弧段内的最高、最低点），越过左边就在右边补一份平移副本，越过上边就在下边补一份，越过一个角就把三个方向都补齐。这样生成的无缝背景纹理，每个格子里的残片在平铺后正好拼回完整的图形。为了保证这件事，单测把每种图案在三档粗细、三档格子宽度下都做了真值对照：一边是「把原始图形摆在 3×3 个格子上取并集」，一边是「补边后的单个格子」，逐点比对，失配点必须为零。
纹理旋转为什么只给这几个角度
CSS 的 background-image 只能沿水平和竖直方向重复，没有办法直接旋转。想要 45° 的条纹背景或斜着的网格，就得找到一块「横平竖直」的新单元格，让旋转后的纹理在它里面仍然是周期的。对边长为 s 的方形格子，旋转角满足 tanθ = p/q（p、q 是互质整数）时，旋转后格子的两条边向量组合 q·v1 − p·v2 正好是水平的、长度为 s·√(p²+q²)，p·v1 + q·v2 正好是竖直的、长度相同，所以边长 L = s·√(p²+q²) 的正方形就是新的重复单元。
| 角度 | 斜率 p:q | 重复单元 L（40px 格子） |
|---|---|---|
| 18.43° | 1:3 | 126.491px |
| 26.57° | 1:2 | 89.443px |
| 45° | 1:1 | 56.569px |
| 63.43° | 2:1 | 89.443px |
| 71.57° | 3:1 | 126.491px |
| 90° | 1:0 | 40px |
负角同理，L 与对应的正角相同。比如选 26.57° 时，40px 的格子会被放进一个 89.443px 见方的超级单元格里，background-size 自动写成这个值。任意角度（比如 30°）的 tanθ 是无理数，找不到有限大小的重复单元，所以本工具不开放；三角形、六边形、砖墙这类非正方形单元格旋转后一般也没有横平竖直的周期，因此只能保持 0°。非 0° 与 90° 时 L 是小数像素，个别缩放比例下可能看到亚像素级的细缝，介意的话改用整幅 SVG 内联或直接下载 PNG。
透明度为什么写在分组上而不是每个图形上
交叉斜线、网格、铜钱纹这类图案，线与线会在交叉处重叠。如果把不透明度写成每个图形自己的 fill-opacity 或 stroke-opacity，交叉处会被半透明地画两遍，颜色明显变深，纹理看起来斑驳。本工具把图案色与不透明度写在包住所有图形的那个 g 元素上：浏览器先把整组图形不透明地合成好，再整体降低透明度，交叉处与其他地方颜色一致。
只有格子布与立体方块例外：它们的深浅色块在设计上互不重叠，才会给单个图形写 fill-opacity 来区分深浅。图案色里如果带了透明度（比如 rgba 或 8 位 hex），本工具会把它并入不透明度滑杆，保证始终只有分组这一处透明度。
CSS 背景代码：URL 编码与 Base64 谁更省
把 SVG 放进 CSS 有两种写法：一种是 URL 编码，只把 % # 尖括号与花括号这几个字符转成百分号形式，双引号改成单引号，其余原样保留；另一种是 Base64，把整段 SVG 转成只含字母数字的长串。Base64 每 3 个字节会变成 4 个字符，天然多出三分之一。
本工具对 24 种默认图案逐一实测，URL 编码的 CSS 比 Base64 版本省 14%~20%，而且 URL 编码后的代码还能看出是什么图形、可以手改；开启 gzip 后，重复的标签名更容易被压缩，差距通常还会拉大。默认波点用 URL 编码是 346 字节，Base64 是 403 字节。只有在少数要求 data URI 必须是 Base64 的老旧环境里，才需要切换到 Base64。
CSS 背景、SVG pattern 与 PNG 该选哪个
| 导出物 | 适合 | 限制 |
|---|---|---|
| CSS 背景 | 不动 HTML 结构，给任意元素铺底纹；底色可单独改 | 图案色写死在 data URI 里 |
| 整幅 SVG（pattern） | 内联进 HTML，任意尺寸铺满，可用 CSS 改色 | 每个页面要内联一份代码 |
| SVG 单元格 | 导入 Figma 等设计软件自行平铺 | 旋转时是超级单元格，尺寸是小数 |
| PNG 背景图 | 壁纸、社交平台封面、不能用 SVG 的场合 | 位图，放大会糊 |
只要简单的条纹、不想引入图片的话，用 CSS 渐变生成器 的重复渐变也能做；要给卡片加阴影或毛玻璃效果，可以配合 盒阴影生成器 一起用。纹理颜色想换成别的格式，可以用 颜色格式转换 先换算好。
要把已有的 SVG 文件转成 PNG、或者编辑图片，请到姊妹站在线图片处理处理；本工具只导出自己生成的纹理。