SVG 图案生成器
选择图形、前景色与背景色并调整缩放，生成可平铺的 SVG 背景图案，然后复制 SVG 或 CSS 并下载文件。
正在加载工具…
SVG 图案生成器 — 选择圆点、网格、条纹、斜线或棋盘等图案形状，设置前景色和背景色，并调整图块缩放和线条粗细。实时预览会将图案平铺在一个方框中，并显示可直接使用的 SVG 标记或 CSS background 规则，方便一键复制或下载。一切都在你的浏览器中完成，颜色、代码和文件绝不会发送到服务器。
SVG 图案生成器 是什么？
SVG 图案生成器是一款免费的浏览器内工具，专为需要轻量、可重复背景又不想打开图形编辑器的网页设计师和前端开发者打造。你可以从下拉菜单中选择图案（圆点、网格、条纹、斜线、棋盘），为图形设置前景色、为图块设置背景色，并用缩放和粗细数字输入框控制图块尺寸和描边厚度。输出是一个绘制为清晰 SVG 的单个图块，可无缝重复，因此文件极小且缩放时不会模糊。用格式开关在原始 SVG 标记和 CSS background-image 规则之间切换可复制的输出，然后复制它或下载 .svg 文件，用于网站、卡片、首屏区域和 UI 原型。
如何使用 SVG 图案生成器
- 从下拉菜单选择图案：圆点、网格、条纹、斜线或棋盘。
- 输入或选取图形的前景色和图块的背景色。
- 设置缩放（图块的像素尺寸）和粗细（圆点半径或线条厚度）数字输入框。
- 打开设置，用格式开关在 SVG 和 CSS 之间切换输出。
- 观察实时预览平铺图案，然后复制 SVG 或 CSS，或点击下载保存 .svg 文件。
示例
波点背景
选择圆点，将缩放设为较小的 24px、粗细设为 3，在深色图块背景上使用浅色圆点，即可得到间距均匀的波点纹理。
蓝图网格
选择网格，缩放 40px，粗细 1px，在深蓝背景上使用淡色线条，制作技术蓝图风格的页面背景。
斜向 CSS 条纹
选择斜线，将格式开关切换为 CSS，把生成的带 background-repeat: repeat 的 background-image 规则直接复制到样式表中。
常见问题
- 可以生成哪些图案？
- 五种可平铺图案：圆点、网格、条纹、斜线和棋盘。每种都绘制为一个无缝重复的小 SVG 图块，因此在任何尺寸下都保持清晰，且文件极小。
- 缩放和粗细控制什么？
- 缩放是单个图块的像素尺寸，决定重复图形之间的间距。粗细是图块内圆点的半径或线条的厚度。粗细会相对缩放自动设上限，因此图案不会填满整个图块。
- SVG 和 CSS 输出有什么区别？
- SVG 提供独立 .svg 文件或内联使用的原始标记。CSS 提供一条使用数据 URI 加 background-repeat: repeat 的 background-image 规则，可直接粘贴到样式表中。用设置中的格式开关在两者间切换。
- 可以可视化选色而不用手动输入 HEX 吗？
- 可以。点击前景或背景字段旁的色块即可打开浏览器内置的取色器，或直接输入像 #4f86f7 这样的 HEX 值。预览和输出会随你的更改而更新。
- 我的颜色或文件会被上传到任何地方吗？
- 不会。图案完全在你的浏览器中作为 SVG 字符串构建，下载也在本地作为 Blob 创建。任何颜色、代码或文件都不会发送到服务器，因此它可离线使用并为你的工作保密。