Mastering SVG Patterns Without Breaking Your Brain (or Budget)

I want to share a little feature of Jarek Foksa's Boxy SVG Editor that I think is nifty, but perhaps not super obvious to new users.

Patterns are the one of the most useful features of SVG – but it can be a little brain-bending trying to get tiling and scaling to do what you want it to.

Happily Boxy SVG handles pattern creation really nicely – if you know where to look. Here's a quick run-through.

Creating SVG Patterns with Boxy SVG.

[caption id="attachment_130242" align="alignright" width="464"] Pattern Fill[/caption]

1). When you've created a new shape, select it and go to the FILL menu and click the stripey Pattern fill tile (shown here).

2). Below the Pattern selector dropdown you'll see 'Add more patterns in DEFS Panel'. Click on the link to switch to the DEFS panel.

3). Now click the '+' button to start a new pattern tile. This will be a copy of your current pattern to begin with. Double-click it to open it in a new window for editing. Feel free to rename your pattern if you like, but it MUST begin with a '#'.

4). Delete whatever is currently in the editor view and begin creating your new pattern using the drawing tools. Resize your 'tile canvas' if you need to by using the 'VIEW' panel.

In this demo, I've created some overlapping sine curves that should tile perfectly.

5). When you're done (you can re-edit your pattern any time), click the SVG box at the top-left of screen to switch back to your main drawing again.

6). Select a shape, go to the Pattern dropdown in FILL and select your newly created pattern (it should be in the list now). You should see something like this.

But what about scaling and positioning the pattern?

7). In the tool panel on the left, select the shape Edit tool. You should now see pink pattern control handles inside your shape.

Use the pink circle to rotate your pattern. Use the pink square to re-scale it.

That's all there is to it. You can use that pattern as many times in the same SVG document, any SIZE you like without making the file any larger. For instance, I used a small patch of pattern for the grid in

SVG patterns are not a new idea but I've never found a tool as fast and easy as this one to manipulate them.

Pattern Inspiration

Now you have the power of SVG pattern mastery, how will you use it? Check out Phillip Rogers SVG Patterns Gallery and Patternbolt for some cool ideas.

Continue reading %Mastering SVG Patterns Without Breaking Your Brain (or Budget)%

by Alex Walker via SitePoint