×

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

作者:Terry2024.06.18来源:Web前端之家浏览:549评论:0
关键词:svg

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

7115534.jpg

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>

image.png

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

那么,SVG 模式比 CSS 背景平铺更有用吗?

当然可以。

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

image.png

这使得你可以用非常简单的组件构建复杂的分层图案。例如,如何使用标准 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)

什么是 SVG 图案生成器?

SVG 图案生成器是一种工具,可让您使用可缩放矢量图形 (SVG) 创建独特、可自定义的图案。这些图案可用于网页设计、图形设计和其他数字艺术形式。生成器提供了一个用户友好的界面,您可以在其中调整各种参数,例如颜色、大小、形状和图案密度,以创建符合您特定需求的图案。

如何使用 SVG 图案生成器?

使用 SVG 图案生成器非常简单。首先,选择要创建的图案类型。可以是任何图案,从简单的条纹到复杂的几何形状。接下来,调整颜色、大小和图案密度等参数,以根据自己的喜好自定义图案。对图案满意后,可以将其下载为 SVG 文件并将其用于设计项目中。

我可以在我的网页设计项目中使用 SVG 图案吗?

是的,SVG 图案可用于网页设计项目。它们对于创建独特的背景和纹理特别有用。由于 SVG 文件是基于矢量的,因此可以缩放到任意大小而不会损失质量,使其成为响应式网页设计的理想选择。

SVG 图案生成器可以免费使用吗?

大多数 SVG 图案生成器均可免费使用,但有些可能会提供付费的高级功能。这些高级功能可能包括额外的图案选项、保存和编辑图案的功能以及访问更大的调色板。

我可以在印刷设计中使用 SVG 图案吗?

是的,SVG 图案可用于印刷设计。由于 SVG 文件是基于矢量的,因此可以缩放到任意大小而不会降低质量。这使得它们成为印刷设计的理想选择,因为高分辨率图形必不可少。

如何从 SVG 图案生成器下载图案?

一旦你创建了满意的图案,你可以将其下载为 SVG 文件。然后可以将此文件导入你选择的设计软件,并在需要时对其进行进一步自定义。

我可以使用 SVG 图案生成器创建动画图案吗?

一些 SVG 图案生成器确实提供了创建动画图案的功能。它们可用于向您的网页设计项目添加动态元素。

我可以使用什么软件来编辑 SVG 文件?

SVG 文件可以使用任何矢量图形软件进行编辑。其中包括 Adobe Illustrator、Inkscape 和 Sketch 等程序。

我可以在我的徽标设计中使用 SVG 图案吗?

是的,SVG 图案可用于徽标设计。它们可以为您的徽标添加独特元素,并使其脱颖而出。

使用 SVG 图案有什么限制吗?

虽然 SVG 图案提供了很大的灵活性,但它们也有一些局限性。例如,复杂的图案会增加 SVG 的文件大小,这可能会影响网站的加载时间。此外,并非所有网络浏览器都支持 SVG,因此在多个浏览器上测试您的设计非常重要。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/htmlvsdf23235.html

网友评论文明上网理性发言 已有0人参与

发表评论: