Adobe Creative Cloud

September 3, 2015 /Code /

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.

The basics

We’ve already looked briefly into SVG patterns in my last article. Sara Soueidan has also wrote a very nice article on text effects. I recommend taking a look at them if you haven’t already.

To recap, this is how you define a pattern:

<svg version="1.1" xmlns="" xmlns:xlink="">
      <pattern id="id-of-your-pattern" width="100" height="100" >
        <rect x="0" y="0" width="50" height="50" fill="red"/>

We simply define a pattern, name it and tell its size. Inside it, we can draw whatever we want.

The 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 fill attribute.

<rect x="0" y="0" width="1000" height="1000" fill="url(#id-of-your-pattern)">

And that leaves us with:

See the Pen vNYJQV by Lucas Bebber (@lbebber) on CodePen.

…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…

Pattern units

Among the SVG patterns’ optional attributes, there are two called patternUnits and patternContentUnits. They are used to tell what the units used in patterns mean – units such as x, y, width, etc. They can receive one of these two values: objectBoundingBox and 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, x, y, width and height). Its default value is objectBoundingBox, meaning that through the width and 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 pattern with 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 patternUnits to userSpaceOnUse.

See the Pen VvwzoE by Lucas Bebber (@lbebber) on CodePen.

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 width/height.

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.

  <pattern patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse" width="0.2" height="1" >
    <circle cx="25" cy="25" r="25" fill="red"/>
  <pattern patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width="0.2" height="1">
    <circle cx="0.1" cy="0.5" r="0.1" fill="blue"/>

See the Pen medxxm by Lucas Bebber (@lbebber) on CodePen.


Now let’s take look at a couple of examples of how we can use patterns to make typographic effects.

Dashed Shadow

See the Pen vNBqRm by Lucas Bebber (@lbebber) on CodePen.

The pattern itself is pretty simple here:

<pattern id="pattern" width="1" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
  <rect x="0" y="0" width="1" height="1.2" fill="#c9cEf2"/>

Notice that, since we just want the pattern to repeat and not stretch, we’re setting the patternUnits attribute to userSpaceOnUse.

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 fill attribute.

<text fill="url(#pattern)">DASHED SHADOW</text>

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 xlink:href attribute.

    <pattern id="pattern" width="1" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect x="0" y="0" width="1" height="1.2" fill="#c9cEf2"/>
    <text id="text">DASHED SHADOW</text>
<use x="6" y="6" xlink:href="#text" fill="url(#pattern)"/>
<use x="0" y="0" xlink:href="#text" fill="#fff"/>

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.

    <text id="text">DASHED SHADOW</text>
    <mask id="mask">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use x="-6" y="-6" stroke="#000" stroke-width="5" xlink:href="#text" opacity="1" fill="#000"/>
<use x="6" y="6" xlink:href="#text" mask="url(#mask)" fill="url(#pattern)"/>
<use x="0" y="0" xlink:href="#text" fill="#fff"/>

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.


See the Pen EVxvWN by Lucas Bebber (@lbebber) on CodePen.

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 mix-blend-mode.

And thats it! Hope you enjoyed it.