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" "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.

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

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…