为你的下一个用户体验设计提供6个聪明的SVG图案生成器
SVG模式很容易被认为是SVG的一种不被重视的超级力量。虽然它们通常不被广泛理解，但一旦你理解了它们的微妙之处，SVG模式就会提供很多有趣的设计选项。
在这篇文章中，我们将从一个速成课程开始，介绍SVG模式如何工作。然后，我们将介绍6种利用这些模式的工具。
从理论上讲，将这些工具的输出结果与你对模式的了解结合起来，应该可以开辟出一些令人兴奋的、新的设计可能性。
SVG模式是如何工作的？
从Geocities和MySpace统治史前互联网的最早时期开始，重复模式就已经是网页设计的主流。即使你只懂一点CSS，你也可能明白将任何图片设置为CSS平铺背景是多么容易。
div {
background-image: url("sitepoint-tile.svg");
}
当然，我们可以使用任何我们喜欢的网络图片格式来做这个背景（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> 部分（或称DEFinitions）是我们放置我们希望以后重复使用的元素的地方。在实践中，这意味着SVGFILTERs、SYMBOLs和PATTERNs。
简单的SVG模式
SVG模式的标记
在我们的<DEFS> 块中，我们已经设置了一个20 x 20px的图案区域。然后我们在这个空间的正中央（cx="10″ cy="10″）放置了一个品红色的小圆圈（虽然这可以是我们想贴的任何物品）。
但这并没有渲染到任何地方--还没有。它只是一个模式定义--几乎就像一个色块或一个CSS类。你需要在你的SVG FILLs中引用它，才能看到它的渲染。
...
<circle cx="50" cy="50" r="50" style="stroke: #ccc; fill: url(#myPattern);" />
</svg>
在这里，我们创建了一个大圆圈（半径50px），并通过引用我们上面定义的图案来填充它。它的渲染效果是这样的。
请看CodePen上Alex (@alexmwalker) 的Pen
简单SVG图案。
这是相对简单的，对吗？我们可以在不增加文件大小的情况下，将这个容器圆圈放大到我们喜欢的程度。
那么，SVG模式是否比CSS背景平铺更有用？
它们当然可以。
SVG允许你在第二个模式中引用一个模式。
这使得你可以从非常简单的组件中建立起复杂的、有层次的图案。例如，你如何用一个标准的CSS瓦片来制作这个摩尔纹图案？
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
首先，我必须解决 "房间里的大象（或者说这里的网络应用）"。
我真的不确定这个选题的名字该如何发音。它是''吗？10-thousand-fifteen-dot-i-o'?我怀疑他们是在用L33t语言拼写 "TOOLS.io"。然而，对我来说，即使与他们理想的几何标志字体搭配，也几乎看不出是'工具'。
你能在同一个词中把 "1 "同时作为 "T "和 "L "来替代吗？就个人而言，我认为不能。也许这只是我的看法？
继续说说积极的方面...
SVG图案生成器"本身是一个令人印象深刻的50个免费在线工具套件的一部分。它所生成的SVG图案资产并不具有巨大的创造性。你可以自定义重复的形状、调色板、比例、不透明度、旋转和倾斜。这个工具的好处是。
- 用户界面快速且易于学习
- 它能生成真正的、随时可用的SVG图案（而不是像其他许多工具那样生成通用的SVG图片板块）
这使得这个生成器成为一个方便的 "点选 "沙盒，用于学习SVG图案的工作方式。改变一个设置。看一下代码。重复一遍。
当你在那里的时候，可以看看他们的SVG blob生成器、CSS Glassmorphism生成器和Google Fonts Pair Finder。
只要记得把它收藏起来就可以了--那是一个很难想起的URL；).
2.英雄模式
英雄模式，一个由UI设计师和插画家Steve Schoger发起的项目，仍然是一个很好的资源。
Steve提供了90多个SVG图案供免费下载，并允许你设置文件的不透明度、前景和背景颜色。
有趣的是，这里的样本也不只是一堆方形的瓷砖，这使得它成为了解你能用SVG图案做什么的好地方。
2.Iros图案填充
在20世纪早期的很多地图和图表中，设计师们经常通过使用单调的点、线和交叉斜线的图案填充来弥补彩色印刷的不足。虽然这是当时的设计限制，但今天它仍然为你的SVG填充提供了一个清晰、高效的选择。
Iros收集了一本单调图案填充的模式书，你可以在你的工作中轻松参考。这些文件很小，即使你只参考几个，你也可以把它们全部包括进去。
4.图案怪物
一个大得吓人的优雅平铺的SVG图形集合--据我统计大约有250个。它可以很容易地对每个设计进行快速缩放、着色、旋转和重新定位。
Pattern Monster让你把瓷砖作为CSS-ready SVG代码导出，所以你需要编码自己的SVG模式定义，以便在SVG图像中使用它们。
5.姆诺提夫
Sébastien Noël在他的ffuel.co网站上有一组令人瞠目结舌的简单、原始和漂亮的设计工具。
在这一组中，他的Mmmotif等距立体图案生成器是最适合这个名单的。像Pattern Monster一样，你可以混合和匹配形状、颜色、比例和角度，组成一个凹凸不平的3D等距砖。
Matt Lipman向我推荐了他的SVG生成器--SVGBackgrounds.com。这个工具目前提供了30种基本图案，但是颜色和不透明度可以通过几次点击进行定制。当你完成后，它可以导出CSS-ready SVG，可以粘贴到你的样式表中。与Pattern Monster的情况一样，你需要手动编码SVG图案的定义。
一小部分荣誉提名...
- Shapes4Free。一个很好的矢量图案的集合，尽管它们目前只是以SVG的块状形式出现--从技术上讲不是SVG图案代码。
- SVG图案库。一个基于Lea Verou的CSS3模式的小型SVG模式集合。虽然已经很久没有添加任何内容了，但仍然值得一看。
- pppixelate。另一个Seb工具。通常我们选择SVG来避免像素化。这个工具却能让你陶醉于此，让你把像素艺术瓷砖画成SVG。
- Geopattern。这是一个有趣的 "程序模式生成 "的实验。无论你在文本字段中输入什么，都可以作为 "种子 "来生成一个新的、独特的图案。一个很酷的好奇心。
- Trianglify生成器。这个工具可以生成一种非常特殊的背景SVG--一个彩色的、有切面的三角形矩阵--几乎就像一个低多边形的3D表面。你可以控制底层网格的颜色、大小和随机性。
收尾工作
伟大的SVG模式是设计灵感和技术诀窍的完美结合，有好的工具来支持你当然有帮助。
如果你对SVG模式的实验感兴趣，我写了一篇关于使用Boxy SVG从头开始创建SVG模式的文章。在使用该工具的过程中，我学到了很多我现在所知道的关于图案的知识。
