How to export SVG patterns

Default avatar.
June 10, 2015
How to export SVG patterns.
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. 001 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. 002 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.) 003 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. 004 Next, draw a square, at 50px by 50px. Align it with the top and right edges of the square. 005 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. 006 Using the Direct Selection Tool, select the anchor points (hold shift to select both.) Then, from the top menu select Object > Transform > Move. 007 Move the two points 20px to the right to form a kind of arrow. 008 Next, duplicate the shape by dragging it to a new position while holding down the alt key. (Or copy and paste if you prefer.) 009 Select the new shape and drag it into the bottom left corner of the pattern square. 010 With the shape still selected, grab a corner and rotate it 180 degrees. (Hold down the shift key to snap to exactly 180 degrees.) 011 From the top menu select Object > Transform > Move and move the new shape -20px. 012 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. 013

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. 014 Select File > Save As. Save your file as a .svg. 015 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. 016

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. 017 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%"/> 018 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%". 019 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. 020 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. 021 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" "">
<svg version="1.1" id="Layer_1" xmlns="" xmlns: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">
 <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 "/>
<rect fill="url(#Unnamed_Pattern)" width="100%" height="100%"/>
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="" 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>


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.

James George

James George is a Professional Web & Graphic Designer. He owns Design Crawl, a site for graphic designers featuring free vector graphics and templates. He also owns G Squared Studios, which handles web design in Knoxville.

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…