It used to be that you could just whack out a tileable image as a gif or jpg at 72dpi and tile it with CSS. It’s a common practice amongst web designers, and has been for years; it’s a quick and easy way to add a pattern or texture to your work. Then those pesky bods over at Apple released retina displays and before we knew it a pixel wasn’t a pixel any longer. Suddenly those beloved patterns became history. SVGs (Scaleable Vector Graphics) are quickly becoming the standard for crisp graphics on the Web. They solve the problem of having to create separate image files to accommodate retina devices. They’re really fun and easy to create, and they open up a world of possibilities…

Step 1: Create a pattern

There are dozens of different applications that will allow you to design an SVG pattern. My favorite is Illustrator, so that’s what I’ll be using. Open Adobe Illustrator and create a new document that is 300px by 300px. Then, go to Object > Pattern> Make and your canvas will change. You’ll notice that there will be a blue square in the middle of your artboard. Also, the Pattern Options Panel will be open. We’ll need to make a slight adjustment before getting started. Go over to the Pattern Options Panel and uncheck the option that says Move Tile with Art. (This feature is annoying, because you won’t be able to move or position your artwork within the pattern square. It will move with it if you don’t uncheck this option.) Next, the sky is the limit to what type of pattern you can create. By default, the pattern square is set to 100px x 100px. You can dial in any size you wish. I left mine at the default. Next, draw a square, at 50px by 50px. Align it with the top and right edges of the square. Next, click and hold your mouse over the Pen Tool. Sub tools will appear, where you can select the Add Anchor Point Tool. From here, add an anchor point to the center of the left and right sides of the square. Using the Direct Selection Tool, select the anchor points (hold shift to select both.) Then, from the top menu select Object > Transform > Move. Move the two points 20px to the right to form a kind of arrow. Next, duplicate the shape by dragging it to a new position while holding down the alt key. (Or copy and paste if you prefer.) Select the new shape and drag it into the bottom left corner of the pattern square. With the shape still selected, grab a corner and rotate it 180 degrees. (Hold down the shift key to snap to exactly 180 degrees.) From the top menu select Object > Transform > Move and move the new shape -20px. Finally, click the Save a Copy button at the top of the window, name the pattern, and save it to complete your pattern. Save a Copy is important if you want to edit it later. This keeps you from having to recreate it all over again.

Step 2: Export the pattern

You’ll notice that once you exit the pattern mode the pattern is automatically selected as your fill. All you need to do is draw a shape on the artboard and it will be filled with the pattern. (If for any reason you’ve changed the fill on the shape, you can find your pattern in the swatches panel, apply it like any other fill.) Next, resize your shape so that it covers the whole 300px by 300px artboard. Select File > Save As. Save your file as a .svg. Next, a dialog box will appear, where you can choose from different SVG formats and options. Be sure to click more options, in the bottom left corner, to see all of the available options for your SVG file. The typical format is SVG 1.1 because it is the most commonly used and most widely supported SVG format. In this box, you’ll also control whether or not you preserve the ability to edit the SVG in Illustrator, or if you enable text on a path, which can be handy. You have the option to use the SVG as an actual file, or you can copy the code and paste it directly in your html document. Once you are finished, click OK.

Step 3: Edit the SVG pattern

Open up the .svg file in a text editor. I’m using Sublime Text, but you can use Notepad, Dreamweaver, or whatever you code HTML in. Open up the same file in a browser so you can preview any changes you make to the code. There are a few different areas to focus on. First, we need to edit the bounds of the SVG file, so that it will fill the browser. You’ll see: <rect fill="url(#Unnamed_Pattern)" width="300" height="300"/> at the bottom. Change both values of 300 to 100% instead. So, your code will look like: <rect fill="url(#Unnamed_Pattern)" width="100%" height="100%"/> You shouldn’t notice a change yet. It should still be a square. Why? Because the viewbox is set to 300 x 300, which are square dimensions. To fill the width and height of the browser, change the code on line 4 from viewBox="0 0 300 300" to viewBox="0 0 100% 100%". When we refresh the browser, the pattern fills our browser from end to end. The problem is, what if you want to change the size of the pattern? Do you go back to Illustrator and redo everything all over again? No. That’s the beauty of having Illustrator generate your SVG code. You can simply edit the code. Don’t think of it as purely a graphics file. Think of it as a code file that you can manipulate and bend to your will. To edit the size of the pattern, look for <pattern width="100" height="100" on line 5. Simply change the values of the width and the height to anything you want. I would recommend keeping it at square proportions, unless you want to distort your pattern. When I change the values to 70, the pattern is smaller, but still fills the width and height to the screen. If you look at the code you’ll see that the pattern is made up of polygons. The first polygon has a fill of “none” (which produces white) and the rest have hex values. To change the colors of our pattern all we need to do is change the fill values. If you’re the kind of person who likes to copy and paste, here’s our final SVG code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 100% 100%" enable-background="new 0 0 300 300" xml:space="preserve">
<pattern width="70" height="70" patternUnits="userSpaceOnUse" id="Unnamed_Pattern" viewBox="50 -100 100 100" overflow="visible">
 <g>
 <polygon fill="#c4e0d3" points="50,-100 150,-100 150,0 50,0 "/>
 <g>
 <polygon fill="#ff6596" points="200,-50 150,-50 130,-25 150,0 200,0 180,-25 "/>
 </g>
 <g>
 <polygon fill="#0299a7" points="100,-50 150,-50 170,-75 150,-100 100,-100 120,-75 "/>
 <polygon fill="#ff0a5c" points="100,-50 50,-50 30,-25 50,0 100,0 80,-25 "/>
 </g>
 <g>
 <polygon fill="#ff7635" points="0,-50 50,-50 70,-75 50,-100 0,-100 20,-75 "/>
 </g>
 </g>
</pattern>
<rect fill="url(#Unnamed_Pattern)" width="100%" height="100%"/>
</svg>

That’s perfectly valid, but it’s a little messy (thanks Illustrator). So I’d recommend optimizing it before you use it. There are lots of optimization options available, but Peter Collingridge’s is one of the best, it gives us this final code:

<svg xmlns="https://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 100% 100%" enable-background="new 0 0 300 300" xml:space="preserve"><pattern width="70" height="70" patternUnits="userSpaceOnUse" id="Unnamed_Pattern" viewBox="50 -100 100 100" overflow="visible"><polygon fill="#c4e0d3" points="50 -100 150 -100 150 0 50 0 "/><polygon fill="#ff6596" points="200 -50 150 -50 130 -25 150 0 200 0 180 -25 "/><polygon fill="#0299a7" points="100 -50 150 -50 170 -75 150 -100 100 -100 120 -75 "/><polygon fill="#ff0a5c" points="100 -50 50 -50 30 -25 50 0 100 0 80 -25 "/><polygon fill="#ff7635" points="0 -50 50 -50 70 -75 50 -100 0 -100 20 -75 "/></pattern><rect fill="url(#Unnamed_Pattern)" width="100%" height="100%"/></svg>

Conclusion

Having the ability to export your Illustrator swatches and patterns as SVGs opens up a wealth of possibilities. Not only can you create an SVG pattern, you can edit the file in a matter of minutes, controlling colors, sizes, and how the file itself is rendered in the browser.