Softonic

SVG 模式生成器

步 1 / 4
下一步

条纹图案是填充英雄区域、分隔线或空白卡片时最可靠的方式之一，无需依赖库存图片。该生成器可输出基于<pattern>模板的清晰 SVG 文件，支持双色显示、可调节条纹宽度及旋转角度，确保同一文件在从320像素移动设备英雄图到4K桌面横幅中均能保持清晰呈现。

如何生成 SVG 条纹图案

  1. 1

    设置画布大小

    输入所需宽度和高度，该 SVG 采用外框区域设计，因此仍能在页面上自动缩放显示。

  2. 2

    选择条形宽度

    较小数值可呈现紧密的细条纹；较大数值则会产生遮阳篷状条带。

  3. 3

    选择角度

    水平方向使用0，垂直方向使用90，经典对角线方向使用45。

  4. 4

    选择两种颜色

    设置前景和背景的十六进制颜色值，透明条纹同样适用。

  5. 5

    复制 SVG

    可将其内嵌粘贴、另存为.svg文件，或通过 SVG 到CSS转换器插入CSS背景中。

图案的构建方式

该 SVG 首先定义一个大小为两条条纹的<pattern>小图案，随后使用fill="url(#stripes)"填充覆盖整个坐标区域的<rect>大图案。由于图案会自动重复，调整画布尺寸不会改变条纹宽度，仅会影响可容纳的条纹数量。

patternTransform="rotate(angle)"可让您无需重新计算几何参数即可生成对角线图案，且该图案在任何角度下都能完美拼接。

Stripe宽度速查表

条形码宽度 视图 常用场景
2 – 6 像素 细密细条纹 形状背景，细腻纹理
10–20 像素 平衡对角线布局 英雄部分、卡片及分隔符
30–60 像素 加粗遮阳篷图案 登陆页横幅、空白状态艺术设计
80 像素以上 海报尺寸区块 需从远处读取的标题

小贴士

当图案位于文本后方时，应保持对比度较低（例如#f5f5f5与#ffffff之间的对比）。 与严格的0度或90度相比，15度、30度和45度的角度显得更加“符合设计要求”。 要使条纹动起来，可将<rect>包裹在<g>中并循环播放；由于采用图案拼接设计，可免费实现无限滚动效果。 该输出结果为纯 SVG 格式，不含外部引用，因此可安全地直接嵌入去除<script>标签的HTML或电子邮件模板中。

常见问题

是的。将输出结果保存为.svg文件，并使用background-image: url(...)和background-repeat: repeat作为参考编号；或将其输入 SVG 到CSS转换器，获取内联数据URL。

对角线会由浏览器进行抗锯齿处理。如果出现边缘锯齿，请将条纹宽度增加1至2像素，或将其转换为更大的PNG文件并缩小显示尺寸。

取色器只会生成不透明的纯色，因此如需让某条条纹透明，请编辑输出的 SVG：将某个 fill 设为 none，或设为带 α 通道的 8 位十六进制代码（例如 #00000000）。这样 SVG 后方的内容便会透出显示。

最终输出结果完全由您掌控，仅基于您的输入数据生成标记代码，不含任何注册商标形状或第三方资源。

你的两种颜色以及宽度和高度仅会发送到我们的服务器以渲染 SVG 预览；不会存储或记录任何内容，也不会上传任何文件。

相关工具

材质设计颜色选择器

浏览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。

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