SVG图案生成器 - 创建无缝背景图案 在线工具
通过实时预览生成自定义SVG背景图案。调整缩放、旋转、不透明度、间距和描边 — 导出为SVG、CSS或PNG格式。100%浏览器端处理，无需发送数据到服务器。
常见问题
什么是SVG图案生成器？
SVG图案生成器是一种以SVG（可缩放矢量图形）格式创建无缝、可重复背景图案的工具。这些图案使用SVG <pattern>元素定义，允许一个小的图形单元在表面上无限平铺。SVG图案因其轻量、可缩放至任意分辨率且可通过代码完全自定义，在网页设计中被广泛用于背景、装饰纹理和视觉点缀。
如何使用这个SVG图案生成器？
1. 浏览图案库并选择图案类型（如斜线、六边形、圆点）。2. 自定义前景色（图案元素）和背景色。3. 调整缩放以控制图案密度。4. 设置旋转角度。5. 微调不透明度、间距和描边宽度。6. 在填充和轮廓样式之间切换。7. 复制SVG代码或CSS代码，或下载SVG/PNG文件。
SVG输出和CSS输出有什么区别？
SVG输出提供包含<pattern>和<rect>元素的完整SVG文件，适合直接嵌入HTML、在设计工具（Figma、Illustrator）中使用或作为图像文件引用。CSS输出提供将图案编码为内联SVG数据URI的CSS background-image代码，适合无需额外文件直接在样式表中应用图案。两种输出产生相同的视觉效果。
无缝图案是如何工作的？
此生成器中的所有图案默认设计为无缝的。SVG <pattern>元素通过在整个表面自动重复图案单元来处理平铺。缩放、间距和旋转参数让您微调平铺外观，但无缝性始终在数学上得到保持。
SVG图案比基于图像的背景好在哪里？
SVG图案相比光栅图像背景（PNG、JPEG）有多项优势：可完美缩放至任意分辨率而不会像素化、文件大小极小（通常不到1KB）、可通过代码自定义颜色/缩放/旋转而无需重新导出、原生支持透明度、在所有屏幕密度（Retina、4K）上清晰渲染、可内联到CSS中无需额外HTTP请求。
我可以在网页项目中使用生成的图案吗？
可以，生成的图案可以在任何网页项目中自由使用。您可以将SVG代码直接嵌入HTML，在样式表中使用CSS输出，或引用下载的SVG文件。图案由几何基元生成，符合标准，可在所有现代浏览器中运行。
这个SVG图案生成器安全且保护隐私吗？
是的。此工具100%在浏览器中使用客户端JavaScript运行。设计数据、图案或颜色配置永远不会发送到任何服务器。所有图案生成、SVG/CSS代码创建和PNG导出都在您的设备上本地处理。
代码示例
// Create SVG background patterns programmatically
function createDiagonalLinesPattern(options = {}) {
const {
size = 10,
strokeWidth = 1,
color = "#6366f1",
backgroundColor = "#ffffff",
opacity = 1,
rotation = 45,
} = options;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<rect width="${size}" height="${size}" fill="${backgroundColor}" />
<line x1="0" y1="${size}" x2="${size}" y2="0"
stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"
transform="rotate(${rotation} ${size / 2} ${size / 2})" />
</svg>`;
}
function createDotsPattern(options = {}) {
const {
size = 20,
dotRadius = 2,
color = "#6366f1",
backgroundColor = "#ffffff",
opacity = 1,
} = options;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<rect width="${size}" height="${size}" fill="${backgroundColor}" />
<circle cx="${size / 2}" cy="${size / 2}" r="${dotRadius}"
fill="${color}" opacity="${opacity}" />
</svg>`;
}
// Convert SVG pattern to CSS background
function svgToCssBackground(svgString) {
const encoded = encodeURIComponent(svgString)
.replace(/'/g, "%27")
.replace(/"/g, "%22");
return `url("data:image/svg+xml,${encoded}")`;
}
// Usage
const linesSvg = createDiagonalLinesPattern({ size: 12, strokeWidth: 1.5, color: "#3b82f6" });
const dotsSvg = createDotsPattern({ size: 16, dotRadius: 1.5, color: "#8b5cf6" });
const element = document.getElementById("my-element");
element.style.backgroundImage = svgToCssBackground(linesSvg);
element.style.backgroundRepeat = "repeat";
console.log("CSS:", svgToCssBackground(dotsSvg));