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 300300, 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

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…