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 you a crash course on how they work. Then we'll spin through 6 tools that take advantage of them.
In theory, combining the tools and what you know about patterns should open up some cool design possibilities.
How do SVG Patterns Work?
Patterns and textures 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.
[code language="css"]
div {
background-image: url("sitepoint-tile.svg");
}
[/code]
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.
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.
[code language="html"]
<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>
...
[/code]
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.
[caption id="attachment_157014" align="alignright" width="236"]
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).
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.
[code language="html"]
...
<circle cx="50" cy="50" r="50" style="stroke: #ccc; fill: url(#myPattern);" />
</svg>
[/code]
Here we’re creating a large circle (radius 50px) and filling it by referencing the pattern we defined above. It renders like this.
Pretty simple, right? And we could scale up that container circle as large as we liked with no increase to the file size whatsoever.
So, are SVG Patterns more useful than CSS tiles?
They certainly can be.
1. SVG allows you reference one pattern from within another pattern
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?
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.
2. SVG patterns aren’t limited to rectangular repetitions.
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.
[caption id="attachment_157006" align="alignleft" width="150"]
Source: Mathstat.slu.edu [/caption]
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.
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.
1. Hero Patterns
Hero Patterns, a project by UI designer and illustrator Steve Schoger, is a good place to start.
Steve currently offers 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 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.
2. Iros Pattern Fills
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.
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.
Continue reading %6 Clever SVG Pattern Generators for Your next Design%
by Alex Walker via SitePoint
No comments:
Post a Comment