SVGSketch Feature

SVG Patterns - Tiled Fills and Textures

Fill shapes with tiled SVG patterns: fourteen presets with color, scale and rotation, plus on-canvas editing. Exports as a real <pattern> tile.

Open SVGSketch

Quick answer

Select a shape, open the Appearance panel and set its Fill Type to Pattern. Pick one of fourteen presets - Stripes, Dots, Grid, Checkerboard, Diagonal, Crosshatch, Zigzag, Waves, Triangles, Hexagons, Diamonds, Circles, Bricks or Herringbone - then set its Foreground, Background, Scale and Rotation. The result exports as a real `<pattern>` tile, not a raster texture.

What the presets look like

FILL PANEL > PATTERN
14 pattern presets, built in Every preset the Fill panel offers, drawn by the editor’s own pattern generator. Each one is a real <pattern> tile in the exported file, not a raster texture.
SCALE, ROTATION, WEIGHTscale 1scale 2rotate 45weight 3
Every preset is parameterized One crosshatch preset at four settings. Scale and Rotation sit beside the preset picker, and each preset adds its own knob - Line Weight here, Dot Size or Amplitude elsewhere.

A pattern is a fill type, not a texture

On the Fill row of the Appearance panel, Pattern sits beside Solid Color, Linear Gradient, Radial Gradient and No Fill. Choosing it swaps the color controls for a preset picker and its parameters, and the shape keeps every other property it had - stroke, opacity, filters, transforms.

What lands in the file is a <pattern> definition and a url(#id) fill reference. It scales without blurring, weighs a few hundred bytes however large the shape is, and stays editable in any other SVG tool.

Every preset is parameterized

Foreground and Background set the two colors. Scale changes the tile size, and Rotation turns the tile without turning the shape. Presets that have their own geometry add a control for it: Line Weight for the stroked presets, Dot Size for Dots, Amplitude for Waves and Zigzag.

Position is edited on the canvas rather than in the panel - the panel says so: "Enter Edit mode to rotate and resize pattern." That puts handles on the tile itself, which is the fastest way to line a hatch up with the artwork it belongs to.

Imported patterns keep working

A pattern that arrives in an imported SVG is preserved as authored rather than approximated by the nearest preset - it is marked Custom, keeps its own tile markup, and round-trips on export. That matters because a hand-authored pattern can contain any SVG at all, including images and nested references that no preset list could describe.

Where patterns live

The Library panel's Patterns tab collects every pattern definition in the document alongside the Symbols, Markers, Gradients and Filters tabs, so a pattern applied to one shape can be reused on another without rebuilding it.

FAQ

How do I fill a shape with a pattern?

Select the shape, open the Appearance panel, and set its Fill Type to Pattern. Then pick a preset and set its Foreground, Background, Scale and Rotation.

How many patterns are built in?

Fourteen: Stripes, Dots, Grid, Checkerboard, Diagonal, Crosshatch, Zigzag, Waves, Triangles, Hexagons, Diamonds, Circles, Bricks and Herringbone. A fifteenth type, Custom, marks a pattern that arrived in an imported file.

Is a pattern fill a raster image?

No. It exports as a `<pattern>` element whose tile is vector geometry, so it stays sharp at any zoom and adds a fixed handful of bytes regardless of how large the filled shape is.

Can I rotate a pattern without rotating the shape?

Yes. Rotation on the Fill row turns the tile only. For interactive placement, enter Edit mode and use the on-canvas handles.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch