Softonic

SVG 网格图案背景

步 1 / 3
下一步

网格图案背景无需图片文件，就能为落地页、首屏区域或卡片提供安静的结构感。在下方设置尺寸和颜色，即可复制一段小型 SVG，它会把一个图块重复铺满整个画布。

如何制作网格图案背景

  1. 1

    匹配覆盖区域

    输入你要覆盖的区域宽度和高度，例如 1200 x 800。

  2. 2

    选择柔和的单元格大小

    将网格大小设为 32 或 40，使线条衬托内容，而不是与之争抢注意力。

  3. 3

    柔化线条

    选择比背景稍深一点的描边颜色，描边宽度设为 1。

  4. 4

    复制 SVG

    在最后一步使用复制按钮，把代码粘贴到需要背景的位置。

图案背景的构成

生成的文件包含一个小图块，它只被定义为一次图案，还有一个用该图案填满画布的矩形。由于浏览器会重复这个图块，无论网格有 20 个单元格还是 2,000 个，文件都只有几百字节。第一个矩形绘制背景色，第二个矩形在其上绘制线条。

每个图块只绘制它的上边和左边，相邻图块会补上其余部分，因此同一条线不会被画两次。这带来一个值得了解的结果：第一列和第一行的线正好位于画布边缘，因此线宽的一半会被截掉。1 px 的线条在顶部和左侧会显示为半像素宽的细边。如果画布宽度恰好是单元格大小的整数倍，那么右边和下边就不会有闭合的线。

选择适合作为背景的数值

背景应当服务于上方的文字。以下是一些安全的起点：

效果 单元格大小 线宽 背景上的线条颜色
若隐若现 40 1 #ffffff 上的 #eeeeee
柔和的结构感 32 1 #f8fafc 上的 #e2e8f0
明显的边框 64 1.5 #ffffff 上的 #cbd5e1

保持线条与背景之间的对比较低。如果上面放的是正文，那么线条颜色与文字颜色过于接近会让人阅读疲劳。

实例

对于宽 1200 px、高 800 px 的首屏区域，40 px 单元格会得到 30 列和 20 行，共 600 个单元格。由于 1200 和 800 都能被 40 整除，网格会在两个边缘都干净地结束。使用 50 px 单元格则为 24 x 16 个单元格，同样干净。而 45 px 单元格会在右侧和底部留下不完整的单元格，因为 1200 除以 45 等于 26.67。

使用结果

可以把 SVG 直接粘贴到标记中，或保存为文件并作为图片引用，也可以把它作为装饰图层放在内容后面。请记住，背景颜色是 SVG 的一部分。如果你想让网格位于另一种颜色之上，请编辑复制代码中的第一个矩形。

让背景与布局对齐

如果内容列宽为 960 px，那么 32 px 或 40 px 的单元格能让网格与列边缘保持一致，因为 960 能同时被两者整除。让网格与布局对齐，线条会显得经过设计，而不是随意的。

常见问题

宽度和高度可接受 50 到 3,000 px 的数值，单元格大小可接受 5 到 500 px。超出范围的值会被限制为最接近的上下限。

每个图块只绘制上边和左边，因此第一行和第一列恰好位于画布边界上，线宽的一半落在画布之外。内部的线条则完整显示。

不会自动重复。SVG 的宽度和高度是固定的。若要覆盖更大的区域，请生成更大尺寸的 SVG，或者在你自己的样式表中把它用作重复的背景图片。

本生成器只用一种线条颜色和一种线宽。如果需要主网格和辅助网格，请生成两个 SVG，并把它们作为两层独立背景叠放。

相关工具

材质设计颜色选择器

浏览Material Design色板，单击即可将任意色号（50至A700）以HEX、RGB或 HSL 格式复制。

五线谱纸生成器

制作可打印的五线谱纸：空白五线谱、高音或低音谱号、钢琴大谱表或吉他六线谱。可设置每页数量、谱线间距、A4 或 Letter 纸张和页边距，并下载 PDF 或 SVG。

乐高风格马赛克制作器

将照片转换成每边 16、32、48 或 64 格的方形马赛克。预览近似颜色、统计 1×1 平板颗粒，并下载带编号的拼搭指南。

SVG 点阵生成器

生成可调整画布、间距、半径和颜色的 SVG 点阵图案。作为 CSS 背景使用前，请将复制的 SVG 编码为数据 URL。

条形码识别器

选择条形码图片，读取编码内容和条形码类型。支持 EAN-13、UPC-A 和 Code 128，并显示 EAN 和 UPC 的校验位结果。

菜单制作工具

在线制作单页餐厅菜单，可编辑分类、菜品、价格和颜色，支持实时预览、下载 SVG 和 PNG 以及浏览器打印。

此工具还提供其他语言版本

使用指南与应用场景