6 个巧妙的 SVG 图案生成器，助力您的下一个 UX 设计

SVG 模式很容易被认为是 SVG 中被低估的超能力。虽然 SVG 模式通常不被广泛理解，但一旦你理解了它们的微妙之处，它就会提供很多有趣的设计选项。在本文中，我们将从速成课程开始，介绍 SVG 模式的工作原理。然后，我们将介绍 6 种利用它们的工具。从理论上讲，将这些工具的输出与你所了解的模式相结合，应该会开辟一些令人兴奋的新设计可能性。

SVG 模式如何工作？

从 Geocities 和 MySpace 统治史前互联网的早期开始，重复图案就一直是网页设计的主流。即使您只懂一点 CSS，您也可能知道将任何图像设置为 CSS 平铺背景是多么容易。

div {
    background-image: url("sitepoint-tile.svg");
  }

当然，我们可以为背景使用任何我们喜欢的 Web 图像格式（JPG、PNG 等）。但由于 SVG 非常高效、清晰且可扩展，因此有充分的理由选择使用 SVG 作为 CSS 背景图块。但是，您可能不太熟悉 SVG 制作重复背景的原生方法 - SVG 图案。它与我们息息相关，因为它提供了常规 CSS 平铺无法提供的特殊功能。但首先，让我们先看看简单的 SVG 图案是如何工作的。

<svg>
  <defs>
  <pattern id="myPattern"
           x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" >
<!-- start pattern-->
      <circle cx="10" cy="10" r="7" style="stroke: none; fill: magenta" />
<!-- end pattern -->
  </pattern>
</defs>
...

在大多数 SVG 文件的顶部，你会发现一个<DEFS>代码块。此<DEFS>部分（或DEF初始化）是我们放置稍后要重复使用的元素的地方。实际上，这意味着 SVG过滤器、符号和模式。

SVG 图案标记

在我们的<DEFS>块内，我们设置了一个 20 x 20px 的图案区域。然后，我们在该空间的正中央 (cx=”10″ cy=”10″) 放置了一个小洋红色圆圈（尽管这可以是任何我们想要平铺的项目）。

但这还不能在任何地方渲染。它只是一个图案定义——几乎就像一个颜色样本或一个 CSS 类。您需要在其中一个 SVG FILL 中引用它才能看到它的渲染。

...
<circle cx="50" cy="50" r="50" style="stroke: #ccc; fill: url(#myPattern);" />
</svg>

这里我们创建一个大圆圈（半径 50px），并参考上面定义的图案来填充它。渲染效果如下。

<svg>
  <defs>
  <pattern id="myPattern"
           x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" >
<!-- start pattern-->
      <circle cx="10" cy="10" r="7" style="stroke: none; fill: magenta" />
<!-- end pattern -->
  </pattern>
</defs>

<circle cx="50" cy="50" r="50" style="stroke: #eee; fill: url(#myPattern);" />
 
</svg>

这相对简单，对吧？我们可以将容器圆圈扩大到我们想要的大小，而不会增加文件大小。

那么，SVG 模式比 CSS 背景平铺更有用吗？

当然可以。

SVG 允许你在第二个图案中引用一个图案

这使得你可以用非常简单的组件构建复杂的分层图案。例如，如何使用标准 CSS 图块生成此莫尔条纹图案？SVG 允许我们定义“基本图案”——如我们上面创建的点——然后用不同的颜色填充、旋转和缩放比例对同一图案进行分层（如上面的示例）。文件很小，但非常复杂。我相信这一特殊特性会开辟许多新的设计可能性——一旦你掌握了基础知识。

SVG 图案和矢量编辑器

所有现代浏览器都很好地支持 SVG 图案，但您最喜欢的矢量编辑器 并不总是支持 SVG 图案。据我所知：

• Adobe Illustrator：Illustrator 拥有出色的图案创建工具，并且十年来一直 能够很好地导出 SVG 图案。我还没有尝试导入现有图案，但我怀疑结果可能不太理想。

• Figma：Figma 目前会忽略任何导入的 SVG 中的图案。恕我直言，这是 Figma 最大的疏忽。

• Inkscape：Inkscape 可以完美地导入和导出 SVG 图案。不过我建议优化最终的 SVG。

• Sketch：我不是 Sketch 用户，但我的研究似乎表明它不支持 SVG 模式（不过我很高兴得到纠正）。

• Boxy SVG：出色的图案导入和导出功能。对我来说，Boxy 的图案管理能力本身就值回购买价。

这不应该成为交易破坏因素，但在选择工具时请注意。

SVG 图案生成器

现在，让我们看看一些可用的现成的 SVG 图案选项。您可以直接使用这些图案，也可以将它们用作更有趣创作的起点。

1.10015.io

首先，我必须解决“房间里的大象（或在本例中为 Web 应用程序）”的问题。我真的不确定如何发音这个选择的名称。是“ ten-thousand-and-fifteen-dot-io ”吗？我怀疑他们正在模仿“ TOOLS.io ”的 L33t 拼写。但是，对我来说，即使与他们理想的几何徽标字体搭配使用，它也几乎读不出“工具”。你能在同一个单词中将“1”替换为“T”和“L”吗？就我个人而言，我认为不行。也许这只是我的看法？继续说积极的方面……“ SVG 图案生成器”本身是令人印象深刻的 50 套免费在线工具的一部分。它生成的 SVG 图案资产并不是非常有创意。您可以自定义重复形状、调色板、比例、不透明度、旋转和倾斜。这个工具的优点是：

1. 用户界面快速且易于学习

2. 它生成真正的、可立即使用的 SVG 图案（而不是像许多其他工具那样生成通用的 SVG 图像块）

这使得该生成器成为一个方便的“点击”沙箱，用于学习 SVG 模式的工作原理。更改设置。查看代码。重复。当您在那里时，请查看他们的SVG blob 生成器、CSS Glassmorphism 生成器和Google Fonts Pair Finder。只需记住将其加入书签 - 这是一个很难记住的 URL ;)。

2.Hero Patterns

Hero Patterns是 UI 设计师兼插画家 Steve Schoger 的一个项目，它仍然是一个很好的资源。Steve 提供了 90 多种 SVG 图案供免费下载，并允许您设置文件的不透明度、前景色和背景色。有趣的是，这里的样本不仅仅是一堆方形图块，这使得它成为了解 SVG 图案可以做什么的好地方。

• http://www.heropatterns.com/

3. Iros 图案填充

在 20 世纪早期的大量地图和图表中，设计师经常使用点、线和交叉阴影等单色图案填充来弥补彩色打印的不足。虽然这是当时的设计限制，但它仍然是当今 SVG 填充的一种简洁、超高效的选择。

Iros收集了一本单色图案填充图案书，您可以在工作中轻松参考。这些文件很小，即使您只参考其中几个，您也有可能负担得起将它们全部包含进去。

• http://iros.github.io/patternfills/

4.Pattern Monster

精美平铺的 SVG 图形集合非常庞大——据我统计，大约有 250 个。可以轻松快速地缩放、着色、旋转和重新定位每个设计。

Pattern Monster 允许您将您的图块导出为 CSS 就绪的 SVG 代码，因此您需要编写自己的 SVG 图案定义以便在 SVG 图像中使用它们。

5. Mmmotif

Sébastien Noël 在他的fffuel.co网站 上提供了令人惊叹的简洁、原创且精美的设计工具集合。

在这群人中，他的Mmmotif 等距 3D 图案生成器最适合这个列表。与 Pattern Monster 一样，您可以混合和匹配形状、颜色、缩放和角度，以组成凹凸不平的 3D 等距图块。

• https://fffuel.co/mmotif/

6.SVGBackgrounds.com

Matt Lipman 向我推荐了他的 SVG 生成器 - SVGBackgrounds.com。此工具目前提供 30 种基本图案，但只需单击几下即可自定义颜色和不透明度。完成后，它会导出 CSS 就绪的 SVG，可粘贴到样式表中。与 Pattern Monster 一样，您需要手动编写 SVG 图案定义。

• SVGBackgrounds.com

少数值得一提的…

• Shapes4Free：一组精美的矢量图案集合，尽管它们目前仅以 SVG 块的形式呈现 - 从技术上讲并不作为 SVG 图案代码。

• SVG 图案图库：基于Lea Verou 的 CSS3 图案的小型 SVG 图案集合。很长时间没有添加任何内容，但仍然值得一看。

• pppixelate：另一个 Seb 工具。通常我们选择 SVG 来避免像素化。此工具充分利用了这一点，允许您将像素艺术图块绘制为 SVG。

• Geopattern：这是“程序化图案生成”方面的一个有趣实验。无论你在文本字段中输入什么，它都会被用作“种子”来生成一个新的、独特的图案。一个很酷的好奇心。

• Trianglify Generator：此工具可生成一种非常特殊的背景 SVG - 彩色的多面三角矩阵 - 几乎像低多边形 3D 表面。您可以控制底层网格的颜色、大小和随机性。

包起来

出色的 SVG 图案是设计灵感和技术知识的完美结合，拥有良好的工具来支持您肯定会有所帮助。如果您有兴趣尝试 SVG 图案，我写了一篇关于使用 Boxy SVG 从头开始创建 SVG 图案的文章。使用该工具进行实验让我学到了很多现在对图案的了解。

关于 SVG 图案生成器的常见问题 (FAQ)