The SVG pattern can easily be thought of as a less admired superpower of SVG. While they are often not widely understood, SVG patterns offer a lot of interesting design options once you understand their subtleties.
In this article, we are going to start with a crash course on how the SVG pattern works. Then we’ll go over 6 tools that take advantage of them.
In theory, combining what you know about patterns to output these devices should open up some exciting, new design possibilities.
How do SVG patterns work?
Repetitive patterns have been a mainstay of web design since the early days of Geocities and MySpace ruled the prehistoric Internet. Even if you only know a little CSS, you probably understand how easy it is to set any image as a CSS tiling background.
div background-image: url("sitepoint-tile.svg");
Of course, we can use any web image format of our choice for that background (jpg, png, etc). But since SVGs are so efficient, fast and scalable there are excellent reasons to choose to use SVG for your CSS background tiles.
However, you may be less familiar with SVG’s basic method for creating repeating backgrounds – svg pattern, It is relevant to us because it provides special powers that regular CSS tiling cannot. But first, let’s see how a simple SVG pattern works first.
<svg> <defs> <pattern id="myPattern" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" > <circle cx="10" cy="10" r="7" style="stroke: none; fill: magenta" /> pattern> defs> ...
At the top of most SVG files you will find
code block. This
clause (or definitions) is where we keep the elements we want to reuse later. Practically speaking, this means SVG filter, Sign And patterns,
svg pattern markup
block, we set the 20 x 20px area of the pattern. Then we placed a small magenta circle (cx=”10″ cy=”10″)” right in the center of that space (although it could be any item we wanted to tile).
But it doesn’t render anywhere – yet. it’s just a pattern definition – Almost like a color swatch or CSS class. You have to reference it in one of your SVG fills for it to render.
... <circle cx="50" cy="50" r="50" style="stroke: #ccc; fill: url(#myPattern);" /> svg>
Here we are creating a large circle (radius 50px) and filling it by referencing the pattern defined above. It presents like this.
It’s relatively simple, isn’t it? We can make that container circle as big as we want, with no increase in file size.
So, are SVG patterns more useful than CSS background tiling?
they definitely can do Happen.
SVG allows you to reference a pattern from within another pattern
It allows you to create complex, layered patterns from very simple components. For example, how would you create this Moiré pattern with a standard CSS tile?
SVG allows us to define a ‘basis pattern’ – like the dots we created above – and then layer that same pattern with different color fills, rotations and scales (like the sample above). Small files but crazy complications.
I believe this particular feature opens up many new design possibilities – once you get a feel for the basics.
SVG Pattern & Vector Editor
SVG patterns are very well supported in all modern browsers, but are not always Supported in your favorite vector editors. So from my understanding:
- Adobe Illustrator: Illustrator has great pattern creation tools and has exported SVG patterns for well over a decade. I haven’t tried importing existing patterns, but I suspect the results may be skewed.
- Figma:figma currently ignores patterns in any imported SVGs. IMHO this is Figma’s biggest oversight.
- inkscape: Inkscape imports and exports SVG patterns beautifully. I would recommend Customizing Your Final SVG Although.
- sketch: I’m not a Sketch user, but my research seems to indicate that it doesn’t support SVG patterns (though I’m happy to be correct).
- boxy svg: Excellent Pattern Import & Export Facilities. To me, Boxy’s ability to manage patterns is well worth the purchase price alone.
This shouldn’t be a deal breaker, but just be aware when selecting your tool.
SVG Pattern Generator
For now, let’s look at some ready-to-use ‘off-the-rack’ SVG pattern options. Take them as they are, or use them as jumping off points for more interesting creations.
First, I have to address the ‘elephant in the room (or web application in this case)’.
I’m not really sure how to pronounce the name of this selection. it is ‘ten-thousand-fifteen-point-io, I suspect they are relying on the spelling of ‘L33t-speak’.TOOLS.io, However, for me barely Their ideal geometric logo reads as ‘tools’ even when paired with the font.
Can you substitute ‘1’ as both ‘T’ and ‘L’ in the same word? Personally, I would argue that no. Maybe it’s just me?
Moving on to the positivity…
,SVG Pattern Generator’ itself is part of an impressive 50-strong suite of free online tools on offer. The SVG pattern assets it generates are not wildly creative. You can customize the repeating size, color palette, scale, opacity, rotation, and slant. This is the cool thing about this tool:
UI is fast and easy to learn
It generates the actual, ready-to-use SVG pattern (instead of a normal slab of SVG image like many other tools)
This makes this generator a handy ‘point-and-click’ sandbox for learning how the SVG pattern works. Change a setting. look at the code. repeat.
Just remember to bookmark it – it’s a hard URL to miss ;).
hero patternThe project, a project by UI designer and illustrator Steve Schauger, remains a good resource.
Steve provides over 90 SVG patterns for free download and allows you to set the opacity, foreground and background colors of your file.
Interestingly, the samples here aren’t just a bunch of square tiles, which is a good place to start to understand what you can do with SVG patterns.
In many maps and charts of the early 20th century, designers often made up for the lack of color printing by using monotone patterns with dots, lines, and cross-hashes. While this was a design limitation of the time, it still presents a crisp, super-efficient alternative to your SVG fills today.
Iros Monotone Patterns Phil has collected a pattern book that you can easily reference in your own work. These are small files and you can probably afford to include them all, even if you only reference a few.
a demonically Large collection of elegantly tiling SVG graphics – about 250 by my count. It’s easy to scale, color, rotate and position each design quickly.
Pattern Monster lets you export your tiles as CSS-ready SVG code, so you’ll need to code your own SVG pattern definitions to use them within an SVG image.
Sebastian Noel has a tremendous collection of simple, original and beautiful design tools available at his fffuel.co site.
of this group emmotif isometric 3d pattern generator Best fit for this list. Like Pattern Monster, you can mix and match shapes, colors, scaling, and angles to create a rugged 3D isometric tile.
Matt Lipman told me about his SVG generator – svgbackgrounds.com, The tool currently offers 30 base patterns, but the color and opacity can be customized with a few clicks. When you’re done, it exports a CSS-ready SVG that can be pasted into your stylesheet. As was the case with Pattern Monster, you have to manually code the SVG pattern definitions.
A handful of honorable mentions…
- size4free: A nice collection of vector patterns, although they are currently only presented as part of SVG – technically not as SVG pattern code.
- SVG Pattern GalleryA small SVG pattern collection based on : Lee Vero’s CSS3 Patterns, Haven’t found any additions for quite some time but still worthwhile.
- pippixellate: Another Seb Tool. Usually we choose SVG to avoid pixelation. This tool revels in it, allowing you to draw pixel art tiles as SVG.
- geopattern: This is an interesting experiment in ‘procedural pattern generation’. Whatever you type in the text field is used as the ‘seed’ to generate a new, unique pattern. A quiet curiosity.
- triangle generator: This tool generates a very specific type of background SVG – a colorful, faceted triangular matrix – almost like a low-polygon 3D surface. You can control the color, size and randomness of the built-in grid.
Great SVG patterns are a perfect mix of design inspiration and technical know-how, and having good tools to support you certainly helps.
If you’re interested in experimenting with SVG patterns, I wrote an article on using Boxy SVG to create SVG patterns from scratch. Experimenting with that tool taught me a lot of what I know about patterns now.