把svg图片生成到svg
Today I want to touch on SVG Patterns. They’re not widely understood, but offer a lot of really interesting design options once you get your head around them. I’m going to start with a crash course on how SVG patterns work. Then we’ll spin through 6 tools that take advantage of them.
今天，我想谈谈SVG模式。 它们并没有得到广泛的理解，但是一旦您掌握了它们，就会提供许多非常有趣的设计选项。 我将从有关SVG模式如何工作的速成课程开始。 然后，我们将介绍6种利用它们的工具。
In theory, combining the output from these tools and what you know about patterns should open up some seriously interesting new design possibilities. Let’s go.
从理论上讲，将这些工具的输出与您对模式的了解结合起来，应该会带来一些非常有趣的新设计可能性。 我们走吧。
Patterns have always been a super common web design element. Even if you only know a little CSS, you probably understand how easy it is to set up any image as a CSS tiling background.
模式一直是超级通用的Web设计元素。 即使您只懂一点CSS，您也可能知道将任何图像设置为CSS拼贴背景是多么容易。
div { background-image: url("sitepoint-tile.svg"); }Of course, we could use any web image format we like for that background (JPG, PNG, etc). But as SVGs are so efficient, sharp and very scalable, there are excellent reasons for choosing to use an SVG for your CSS background tiles.
当然，我们可以使用该背景所需的任何Web图像格式(JPG，PNG等)。 但是，由于SVG如此高效，敏锐且具有很好的可扩展性，因此有很好的理由选择将SVG用于CSS背景图块。
However, you may be less familiar with SVG’s native way to make repeating backgrounds – SVG patterns. It is interesting because it has some special powers that regular CSS tiling can’t offer. But first, let’s look at how a simple SVG pattern works first.
但是，您可能不太熟悉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> ...In the top of most SVG files you’ll find a <DEFS> code block. The <DEFS> section (or DEFinitions) is where we place item we want to re-use later. In practice, this means SVG FILTERs, SYMBOLs and PATTERNs.
在大多数SVG文件的顶部，您将找到<DEFS>代码块。 <DEFS>部分(或DEF initions)是放置我们以后要重复使用的项目的位置。 在实践中，这种手段SVG 过滤 ， 符号和图案 。
Simple SVG patterns – (Or as a codepen example)
简单的SVG模式-( 或作为代码笔示例 )
Inside our <DEFS> block, we’ve set up a 20 x 20px area of pattern. Then we’ve positioned a small magenta circle right in the center (cx=”10″ cy=”10″) of that space (though this could have been anything we wanted to tile).
在我们的<DEFS>块中，我们设置了20 x 20px的图案区域。 然后，我们在该空间的中心(cx =“ 10” cy =“ 10”)处定位了一个小的洋红色圆圈(尽管这可能是我们想要平铺的任何东西)。
But this doesn’t render anywhere – yet. It is just a pattern definition – almost like a color swatch or a CSS class. You have to call it in an SVG FILL to use it.
但这并没有在任何地方渲染。 这只是一个模式定义 -几乎就像一个色板或CSS类。 您必须在SVG FILL中调用它才能使用它。
... <circle cx="50" cy="50" r="50" style="stroke: #ccc; fill: url(#myPattern);" /> </svg>Here we’re creating a large circle (radius 50px) and filling it by referencing the pattern we defined above. It renders like this.
在这里，我们创建了一个大圆圈(半径为50px)，并通过引用我们上面定义的模式来填充它。 它像这样渲染。
(Or as a codepen example)
(或作为一个代码笔示例)
Pretty simple, right? And we could scale up that container circle as large as we liked with no increase to the file size whatsoever.
很简单，对吧？ 而且我们可以将容器圆扩大到我们喜欢的大小，而不会增加文件大小。
They certainly can be.
他们当然可以 。
This allows you build-up complex, layered patterns from very simple components. For instance, how would you produce this Moiré pattern with a standard CSS tile?
这使您可以从非常简单的组件中构建复杂的分层模式。 例如，您将如何使用标准CSS磁贴来产生这种莫阿图案？
SVG allows us to define a ‘base pattern’ – like the dots we created above – and then layer that pattern with different color fills, rotations and scale (like above). Tiny files, but crazy complexities.
SVG允许我们定义一个“基础图案”(就像我们在上面创建的点一样)，然后使用不同的颜色填充，旋转和缩放来对该图案进行分层(如上所述)。 小文件，但疯狂的复杂性。
While CSS tiling backgrounds are always rectangles, SVG is a language of mathematics and geometry, designed to tile (or tesselate) in triangles, hexagons and even ‘Escher-esque’ multi-shape combinations.
尽管CSS拼贴背景始终是矩形，但SVG是一种数学和几何语言，旨在将三角形，六边形甚至“埃舍尔式”多形状组合拼贴(或镶嵌 )。
Hexagon-based tesselations. Source: Mathstat.slu.edu
基于六边形的细分。 资料来源： Mathstat.slu.edu
M.C. Escher’s famous Lizard tessellation is a famous example based on a hexagonal tile – this would be tough to do with rectangular tiles. In short, SVG patterns offer all sort of interesting design possibilities if you’re ready to experiment.
MC Escher著名的蜥蜴镶嵌是一个以六角形瓷砖为基础的著名示例-使用矩形瓷砖很难做到这一点。 简而言之，如果您准备进行实验，SVG模式将提供各种有趣的设计可能性。
I think these are two characteristics that open up lots of design possibilities – once you get a feel for the basics.
我认为这是两个特征，这些特征为您提供了很多的设计可能性-一旦您了解了基础知识。
But for today, I thought we’d look at some of the ready-to-use ‘off-the-rack’ options out there. Take these as they are, or else use them as a jumping off point for more interesting creations.
但是今天，我认为我们会考虑一些现成的“现成”选项。 照原样使用它们，否则将它们用作更有趣的创作的起点。
Hero Patterns, a project by UI designer and illustrator Steve Schoger, is a good place to start.
UI设计师和插画家史蒂夫·斯科格(Steve Schoger)共同开发的项目Hero Heros是一个不错的起点。
Steve currently offers over 90 SVG patterns for free download and allows you to set the opacity, foreground and background colors of your file.
史蒂夫目前提供90多种SVG模式供免费下载，并允许您设置文件的不透明度，前景色和背景色。
Interestingly, the samples here are not just a bunch square tiles either, which makes it a good place to get an understanding of what you can do with SVG patterns.
有趣的是，这里的样本也不只是一堆正方形瓷砖，这使得它成为了解SVG模式可以做什么的好地方。
http://www.heropatterns.com/
http://www.heropatterns.com/
In a lot of early 20th century maps and charts, you’ll see they often make up for a lack of color by using monotone pattern fills with dots, lines, and cross-hashes. Although this was a design limitation of the time, today it still presents a crisp, super-efficient option for your SVG fills.
在20世纪初的许多地图和图表中，您会看到它们通常通过使用带有点，线和叉线的单调图案填充来弥补颜色的不足。 尽管这是时间的设计限制，但今天，它仍然为您的SVG填充物提供了一种清晰，超高效的选择。
Iros has collected a pattern book of monotone pattern fills that you can reference in your work easily. These are tiny files and you can probably afford to include them all, even if you only reference a few.
Iros收集了单调图案填充的图案书，您可以在工作中轻松参考。 这些都是很小的文件，即使您只引用了一些文件，您也可能可以负担得起全部文件。
http://iros.github.io/patternfills/
http://iros.github.io/patternfills/
To be clear, Trianglify Generator doesn’t use the SVG pattern element, but I feel it sits comfortably amongst this set of tools.
需要明确的是， Trianglify Generator没有使用SVG模式元素，但是我觉得它在这套工具中很舒服。
This is a tool that generates one very specific type of background SVG – a colored, faceted triangular matrix – almost like a low-polygon surface. You can control the color, size, and randomness of the underlying grid.
这是一种可以生成非常特殊类型的背景SVG(有色，多面三角形矩阵)的工具，几乎类似于低多边形表面。 您可以控制基础网格的颜色，大小和随机性。
Though these backgrounds certainly have limited use cases, they offer a vibrant, semi-organic design element that can scale crisply to cover huge areas while remaining a tiny file size.
尽管这些背景肯定有有限的用例，但它们提供了充满活力的半有机设计元素，可以轻松缩放以覆盖很大的区域，同时保持很小的文件大小。
https://qrohlf.com/trianglify-generator/
https://qrohlf.com/trianglify-generator/
Flaticon are well known for their extensive library of downloadable icons, but they also have a nice tool that can turn the icons into a wrapping paper-like seamless tile.
Flaticon以其丰富的可下载图标库而闻名，但它们也有一个不错的工具，可以将图标变成包装纸般的无缝磁贴。
It’s easy to use. Click on icons from the library to add them to your workspace. Click on an icon to select it and adjust the circular control to scale, position and rotate each icon. When you’re done you can down your pattern as SVG, or, if you prefer, PNG, JPG, and even Base64 encoded.
易于使用。 单击库中的图标以将它们添加到您的工作区。 单击图标将其选中，然后调整圆形控件的大小，位置和旋转每个图标。 完成后，您可以将样式降低为SVG，或者，如果愿意，可以将其压缩为PNG，JPG甚至Base64编码。
Be aware that the Flaticon icons used here are quite rich and detailed (read: large files), so loading lots of them into your pattern design can still really blow your file size out.
请注意，这里使用的Flaticon图标非常丰富和详细(阅读：大文件)，因此将大量图标加载到图案设计中仍会确实使文件大小变大。
http://pattern.flaticon.com/
http://pattern.flaticon.com/
Philip Rogers has been maintaining a pretty cool collection of downloadable SVG patterns. It’s not a huge collection – 21 patterns – but Phil has made it easy to test and grab the code.
菲利普·罗杰斯(Philip Rogers)一直保持着很酷的可下载SVG模式集合。 它不是一个庞大的集合-21种模式-但Phil使测试和获取代码变得容易。
https://philiprogers.com/svgpatterns/
https://philiprogers.com/svgpatterns/
This is an interesting experiment in generated patterns. Whatever you type into the text field is used as ‘seed’ to generate a unique pattern. In other words, it’s not random – type the same thing and you’ll get the same pattern each time.
这是生成模式的有趣实验。 您在文本字段中键入的任何内容都将用作“种子”以生成唯一模式。 换句话说，它不是随机的-键入相同的内容，每次都会得到相同的模式。
To be honest, it’s probably more of a curiosity than a production-ready tool in its current form. Although it works in SVG behind the scenes, it only lets you download PNG copies of your image – which makes it less useful in my view.
老实说，它可能比当前形式的可用于生产的工具更具好奇心。 尽管它可以在后台使用SVG，但只能让您下载图像的PNG副本-在我看来，它的用处不大。
Nevertheless, I think it shows what you can do by taking a geometric approach to image generation. These images aren’t so much consciously designed as ‘unearthed in a mining operation’.
尽管如此，我认为它显示了采用几何方法生成图像可以做什么。 这些图像并不是像“在采矿作业中发现的”那样有意识地设计的。
http://btmills.github.io/geopattern/
http://btmills.github.io/geopattern/
Yes, the title says 6 SVG generators, but here’s an extra freebie, just for getting this far!
是的，标题说有6个SVG生成器，但这是一个额外的免费赠品，只是为了达到目标！
Recently Matt Lipman tipped me off to his new SVG generator – SVGBackgrounds.com. This tool currently offers 30 base patterns, but the colors and opacity can be customized with a few clicks. When you’re done, it exports CSS-ready SVG that can be pasted straight into your stylesheet.
最近，马特·利普曼(Matt Lipman)向我介绍了他的新SVG生成器– SVGBackgrounds.com 。 该工具目前提供30种基本图案，但是只需单击几下即可自定义颜色和不透明度。 完成后，它将导出可用于CSS的SVG，可以将其直接粘贴到样式表中。
SVGBackgrounds.com
SVGBackgrounds.com
Great SVG patterns are a perfect blend of design inspiration and technical know-how and good tools certainly help.
出色的SVG模式完美融合了设计灵感和技术知识，好的工具肯定会有所帮助。
If you’re interested in experimenting with SVG patterns, I wrote a piece last year on using Boxy SVG to create SVG patterns from scratch. Playing with that tool taught me a lot of what I know about patterns now.
如果您有兴趣尝试SVG模式，我去年写了一篇文章，介绍了如何使用Boxy SVG从头开始创建SVG模式 。 现在，使用该工具可以教给我很多有关模式的知识。
翻译自: https://www.sitepoint.com/6-incredible-svg-pattern-generators/
把svg图片生成到svg
相关资源：PatternGen：svg模式生成器-源码