代码、数据与二维码工具

SVG图案生成器

生成Dots、Grid、Diagonal和Checker四种可平铺SVG图案,支持颜色、图块尺寸与细节控制、实时预览、复制和SVG下载。

优先本地处理无需注册隐私说明 ↗

For dots, this is the circle radius.

Colors and numeric values are validated before source is generated. The export uses no scripts, fonts, URLs, or external files.

LIVE PREVIEW

使用步骤

如何使用

  1. Choose dots, grid, diagonal, or checker, then set foreground and background colors.
  2. Adjust the bounded tile and detail controls while checking the live repeated preview.
  3. Copy the standalone SVG source or download it as an SVG file for your own project.

Four repeatable vector patterns

Dots, grids, diagonals, and checkers are written as ordinary SVG shapes inside a user-space pattern. The exported SVG contains a background rectangle and the pattern definition together, so it is a complete image rather than a stylesheet fragment or remote asset.

Bounded controls and safe source

Tile size stays between 12 and 160 pixels, and detail stays within a practical 1 to 32 pixel range. Colors come from browser color controls and are validated before they enter the SVG source. This focused editor does not accept arbitrary SVG markup, scripts, URLs, fonts, or external image references.

Preview is a design check

The preview repeats the generated local SVG in your browser. Edge anti-aliasing and the apparent density of a small pattern can differ with scale, browser zoom, and the surface behind it. Check contrast and test the exported SVG at the final size before using it for meaningful information.

常见问题

你可能还想知道

Is the downloaded file a complete SVG?

Yes. It includes an SVG root, a pattern definition, and a rectangle filled by that pattern. You can open it directly in a browser or place it in an image workflow that accepts SVG.

What does Detail mean for each pattern?

For dots it controls the circle radius. For grid and diagonal it controls stroke width. For checker it controls the visible separation between its two filled squares.

Does the tool upload my colors or SVG?

No. Pattern construction, previewing, copying, and downloading run in the current browser. The generated source does not link to an outside resource.

Can I paste custom SVG code into this tool?

No. This generator intentionally creates only four bounded pattern forms. Limiting its inputs keeps the exported XML predictable and avoids injecting untrusted markup into the preview.