Softonic

SVG 点阵生成器

步 1 / 3
下一步

点阵图案是现代网页背景中低调却不可或缺的元素，例如Notion页面背后的细腻点状网格、主页区域的波点装饰，或是卡片上的颗粒质感。该生成器通过内联<pattern>定义构建单一 SVG 文件，因此文件体积极小（通常不足500字节），且能完美适配各种屏幕尺寸。用户可自定义画布尺寸、点间距、圆角半径、点颜色及背景色。

如何创建点阵图案

  1. 1

    设置画布

    宽度和高度（单位：像素）。对于CSS背景，该值可保持较小尺寸（例如800×600）并支持拼接显示。

  2. 2

    选择间距

    相邻点中心之间的距离。20–40像素效果清晰；10像素则显得杂乱。

  3. 3

    设置圆点半径

    1–3像素用于营造微妙的纹理效果；4–8像素用于呈现刻意设计的波点图案。

  4. 4

    选择颜色

    点填充（前景）与画布背景。将背景设置为`transparent`以实现真实的叠加效果。

  5. 5

    复制 SVG

    粘贴到您的HTML中，或在CSS中使用`background-image: url("data:image/svg+xml,...")`。

如何定义该模式

该生成器在<defs>内部输出一个<pattern>元素，并用fill="url(#dots)"填充整个画布上的<rect>区域：

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse"将瓦片尺寸锁定为像素单位，因此缩放父 SVG 时不会导致点状图案变形。

模式调谐速查表

视图 间距 半径 对比度
轻语（几乎不可见） 30–40 1–1.5 不透明度 5–10%
精致背景 25–30 2 不透明度 15–20%
真实点阵图案 20 2–3 全彩
精心设计的波点图案 40–60 8–15 全彩
半色调效果 10 1 渐变填充

作为 CSS 背景使用

将 SVG 编码为数据URL，并应用于任意元素：

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

使用CSS对 SVG 进行分块渲染比直接发送PNG文件更快，浏览器会根据最终显示尺寸对其进行光栅化处理，因此在所有DPR分辨率（1倍、2倍、3倍）下都能保持清晰度。

点状标记会影响可读性

正文内容正后方若采用点阵图案，会在细体文字上形成闪烁的摩尔纹效果。如需在上方放置文字，请选择以下方案之一：

  • 将间距设置为 40 像素以上，使点位于行之间；或
  • 将图案透明度设置为低于 10%；或
  • 将文字置于图案上方的实心卡片内。

常见问题

将背景颜色设为transparent，此时仅显示点状图案。将 SVG 放置在需要覆盖的任何颜色或图像上即可。

使用此生成器则无法实现，它只会生成方形网格。若需六边形布局，则需采用高度为宽度sqrt(3)倍的图案方块，且每个方块上均包含两个偏移半个位置的圆。建议使用 SVG 路径构建工具或专用的六边形生成器。

SVG 本身在任何尺寸下均呈现清晰效果，但若将其以低于图案单元格分辨率进行光栅化处理，则会出现锯齿现象。导出时请使用预期显示尺寸的2倍或3倍分辨率。

将圆圈上的 fill="#hex" 替换为 fill="url(#gradient-id)"，并在同一 <defs> 内添加 <linearGradient> 的定义。此时每个点都会呈现该渐变效果，若画布包含数千个点，这种处理可能会带来较高的计算成本。

标准编辑器会将画布、间距、半径和颜色发送到服务器以渲染预览。在引导流程中，这些设置也会显示在页面 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。

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