🔲
SVG 图案生成器
生成可平铺的 SVG <pattern> 背景（圆点/网格/斜线/波浪），复制矢量代码。
本地处理 · 不上传
加载工具中…
相关：svg · pattern · 图案 · 背景 · 矢量 · 平铺
SVG 图案生成器生成可无缝平铺的 SVG 图案——点阵、网格、斜线、波点等，可调尺寸颜色与密度，输出代码或 data URI。
使用步骤
- 选择图案类型
- 调整尺寸、间距与颜色
- 预览平铺效果
- 复制 SVG 或 data URI
使用场景
- 为页面区块添加纹理背景
- 制作图纸风格的网格底
- 设计装饰性的重复图案
- 替代位图纹理保证清晰度
小贴士
- SVG 图案矢量无损，在任何缩放与高清屏下都锐利，这是相比位图纹理最大的优势。
- 转成 data URI 内联进 CSS 可以省掉一次请求，但要记得对 `#` 等字符做 URL 编码，否则会解析失败。
- 图案的对比度要低。作为背景时它应该是若隐若现的质感，抢过内容就是设计失误。
常见问题
data URI 里的颜色写不进去？
十六进制颜色的 `#` 在 data URI 中必须编码成 `%23`，否则后面的内容会被当成片段标识符截断。这是最常见的踩坑点。
和 CSS 渐变图案怎么选？
条纹、格子这类由直线构成的图案用 CSS 渐变更简洁；含曲线、圆点或复杂形状的图案用 SVG，表达能力强得多。
怎么保证无缝平铺？
图案单元的边缘图形必须在对边有对应的另一半。生成器已处理好这点，手工修改时要注意不要破坏边缘的对称关系。
SVG 图案生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用SVG 图案生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。