Softonic

SVG 网格生成器

步 1 / 3
下一步

网格背景是设计工具（如Figma、Framer）、面向开发者的着陆页（如Linear、Vercel）以及所有追求蓝图或图表纸风格界面设计中的核心元素。它也是可直接使用的最轻量级背景之一，采用重复排列的<pattern>网格结构，仅需两笔绘制，文件体积通常低于300字节。该生成器支持任意单元格尺寸、线条粗细和颜色设置，用户可根据需求调整其样式，获得细腻的Figma风格网格效果或鲜明的蓝图视觉呈现。

如何构建网格

  1. 1

    设置画布尺寸

    宽度和高度可设为 50 至 3,000 像素。使用单元格大小的倍数可避免边缘出现不完整单元格。

  2. 2

    选择单元格大小

    可选择 5 至 500 像素。细微背景可用 20–40 像素，方格纸可用 8–12 像素，醒目线框可用 60–80 像素。

  3. 3

    选择笔画宽度和颜色

    0.5–1像素的笔画可识别为清晰线条；超过2像素时则呈现绘制效果。

  4. 4

    设置背景

    选择 SVG 输出的纯色背景。若要叠加到其他背景上，请复制 SVG，然后在自己的代码中修改或删除背景 `<rect>`。

  5. 5

    复制 SVG

    将内容粘贴到标记中，或内联插入CSS数据URL以生成可铺贴的背景图像。

图案元素

每个单元格均为一个单独的<path>图形，其绘制右侧边缘和底部边缘；重复使用该图形即可构建整个网格，每个单元格仅需两条线段而非四条：

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

关键在于路径 M 40 0 L 0 0 0 40：从 (40,0) 开始，沿直线至 (0,0)，再沿直线至 (0,40)。该路径仅将顶线绘制至左上角，随后沿左侧向下延伸；当拼接成网格时，可形成完整的网格结构且无重复笔画。

图案尺寸选择指南

用例 单元格大小 线宽 颜色效果
类Figma画布 20–30像素 1像素 #e5e7eb 在 #fafafa 上
图形纸 10–12 像素 0.5 像素 #cbd5e1 在 #ffffff 上
图形模板 40–60 像素 1 像素 #bfdbfe 在 #1e3a8a 上
线框图 80 像素 1.5 像素 #9ca3af 在 #ffffff 上
回归终端 16 像素 1 像素 #22c55e 在 #000000 上

主网格 + 次网格

若需获得带有精细网格及每隔N个单元格出现更明显主网格的蓝图效果，请叠加两层 SVG 背景：

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid ...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid ...</svg>");
}

浏览器会在一次绘制中合成两者，完全不会影响性能。

可访问性

该网格仅为装饰性元素。将其应用于伪元素（::before与position: absolute; inset: 0; z-index: -1;）时，屏幕阅读器和内容解析器仅能识别实际内容，而不会显示背景。

常见问题

以亚像素宽度绘制的 SVG 笔画可实现抗锯齿效果。将笔画宽度固定为整像素值（1、2），并将路径向右或向左移动0.5像素（针对1像素笔画），使其与像素网格对齐。

使用此生成器无法实现。六边形网格需要一个宽度为高度的√3倍的方格，以及一条能绘制半个六边形的路径。请使用专用的六边形网格工具或在Figma中手动绘制。

该编辑器会输出纯色背景。若要叠加使用，请复制 SVG，并在自己的代码中将第一个背景 <rect> 改为 fill="transparent"，或将其删除。

是的。 SVG 网格文件大小为200–500字节，能精准适配各种DPR分辨率，并支持通过CSS变量调整颜色；而PNG网格文件通常为5–20KB，在视网膜显示屏上会出现明显的像素化。

编辑器会向本站服务器发送当前尺寸和颜色来渲染 SVG。在三步流程中，这些设置也会出现在页面 URL 中。请勿输入机密值；这里没有源文件上传，也没有保存的项目。

相关工具

材质设计颜色选择器

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

PNG 转 SVG 矢量化工具

在浏览器中把 PNG 栅格图像转换为 SVG 路径。适合徽标、图标和线稿。可控制阈值、颜色数量和平滑度。

ARW 转 JPG 转换器

将索尼 ARW RAW 照片转换为 JPG。无需打开 Lightroom，即可从相机 RAW 文件得到一张便于分享、通用兼容的 JPEG。

报纸制作工具

使用你自己的标题和文章制作报纸风格的头版，然后复制、下载纯文本，或打开浏览器打印对话框。

半色调生成器

将照片转换为可调节的 AM 式半色调，可选单色、取样色和 CMYK 风格模式，并下载 PNG 或矢量网点 SVG。

在线白板

在浏览器中的私人白板上绘制想法，排列形状、便签和本地图片。支持撤销操作，并导出 PNG、JPEG、SVG 或可编辑的 JSON。

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