An Overview of SVG Patterns
In this post, we are going to take a look at SVG patterns and what we can make with them. SVG patterns are analogous to CSS backgrounds, and are scarcely more than repeating images. However, combined with everything else SVG has to offer, SVG patterns can be a great tool for making nice effects.
In this article, we’ll see some typographic effects that can be done with them.
To recap, this is how you define a pattern:
We simply define a pattern, name it and tell its size. Inside it, we can draw whatever we want.
defs tag in SVG contains elements that are not to be rendered immediately. That is the case with SVG patterns: to render them, you have to apply them to an SVG element, through its
And that leaves us with:
…wait, hold on. That probably rendered weirdly (blurry, pixelated) depending on your browser, and on top of that, since it is supposed to be a pattern, why is it not repeating? To answer this, we’ll have to look into…
Among the SVG patterns’ optional attributes, there are two called
patternContentUnits. They are used to tell what the units used in patterns mean – units such as
width, etc. They can receive one of these two values:
userSpaceOnUse. Setting to
userSpaceOnUse means that the units are the same as regular units on the object. That is, usually, one unit = one pixel. It doesn’t take into account the object’s dimensions. Setting to
objectBoundingBox means that the values are set in relation to the bounding box of the object that the pattern is being applied to. 0 is the start of the bounding box, 1 is the end. The attribute
patternUnits defines the coordinate system of the values applied to the
pattern element itself (basically,
height). Its default value is
objectBoundingBox, meaning that through the
height attributes, you are telling what percentage of the object you want each pattern tile to fill up, instead of telling the dimensions of the tiles – consequently, you are also telling how many tiles will there be. So, for example, a
width='0.25' means that 4 tiles will line up horizontally, each filling 25% of the object’s width. Depending on what you want your pattern to do, that can be desirable or not. If you want to simply specify the tile size, set
patternContentUnits defines the coordinate system for the objects inside the
pattern. Its default value is
userSpaceOnUse, meaning that each tile will maintain it’s width regardless of the object’s size. If you want the pattern to resize along with the object, you should set this attribute to
objectBoundingBox, but pay attention: When you are creating the pattern, you have to draw it with with
objectBoundingBox‘s unit system in mind, that is, 1 = 100% of the object’s
For example, if you want 5 tiles to line up horizontally the width of the contents of the pattern should not exceed 0.2. If you are drawing the patterns with Illustrator, you should re-size the graphic to that width before exporting.
Now let’s take look at a couple of examples of how we can use patterns to make typographic effects.
The pattern itself is pretty simple here:
Notice that, since we just want the pattern to repeat and not stretch, we’re setting the
patternUnits attribute to
Also notice the
patternTransform property here. It allows us to use transformations such as rotating, translating and skewing our patterns. Here we are using it to rotate our striped pattern 45 degrees in order to make our lines diagonal.
To apply it to text, we just set it to its
To use it as a shadow, we have to actually duplicate and shift our text, and apply the effect to the text that stays behind. So we don’t have to maintain two separate text elements, SVG allows us to put elements on the
defs tag we’ve seen before, and reuse them as many times as we’d like, with the
use element. We then reference to the element’s id through the
After that, we can add the details we want. In my example, I cut off a bit of the shadow near the text using a mask.
On SVG masks, white means visible and black means hidden. What I’m doing here is to draw a big white rectangle, and draw our text over it in black with a black stroke. Thus, everything within the text’s stroke will be hidden, making the mask we want.
This effect is pretty similar to the one I wrote about in my last article.
In that article, you can see a use case for setting the
patternContentUnits attribute to
objectBoundingBox – we wanted the pattern to stretch to the object’s height.
In this demonstration, I’m using multiple layers, with the
use tag we’ve seen before. Depending on your browser, you can also see a demonstration of
And thats it! Hope you enjoyed it.