2.9. Using patterns

The ‘ pattern ’ element is a member of a 'defs' section and defines the graphic that is to be used to fill a shape by replicating an object.

It performs two key functions: hatching and wallpaper.

DrawSVG has a default palette of patterns.

See creating , using patterns showcases for interactive demonstrations.

To use pattern :

Apply a pattern of the default palette to the selected shape
Customize the pattern for the selected shape with a transformation
Edit patterns definitions
Draw and define a new one

To apply a pattern, select the shape and choose the pattern from the fill style menu.

To choose the pattern, two other tools can be used :

The pattern definition Image gradient-cutomize.png tool

Or the pattern chooser Image svg143.svg tool

Image apply-pattern.png

Note

A pattern can be applied also to a line with the stroke style menu.

To customize the pattern of a shape, use the transform pattern Image taskPatternTransform.svg editor from the floating menu :

To prevent modification of the shared pattern definition, make a copy or an extension of the pattern,
Then define the transformation with the rotation angle and the scale factor

Apply the transformation or close the panel without modification.

Customization by extension has the advantage of minimizing the volume and continue to benefit from changes made to the basic pattern.

To edit the pattern definition of a shape, select the shape and use the pattern definition tool Image gradient-cutomize.png from the fill style menu.

The tool allows to edit/copy/extends/delete a pattern definition,

When opened, the panel is showing the pattern of the selected shape. You can change it's properties and apply then, or select another pattern and apply it to the shape.

To define a new pattern, draw elements of it's graphic, select them and use the pattern definition tool Image taskPatternTransform.svg from the selection menu.

The pattern is defined with the selection :

The elements of the pattern are defined by a copy of the selection.
The viewbox is set with the bounding box of the selection
The units of the tile is set as userSpaceOnUse and it's size equals to viewbox size

Then you can change each properties :

Identity : the pattern's id.
ViewBox : Use text fields (x,y,width, height), icons (zoom/in zoom/out) and text field ratio for extending or reducing the area. To add a margin of 20% type 120<enter> in the ratio field.
Tile : Define the dimensions and units of the filling tile. Use text fields (x,y,width, height), icons (zoom/in zoom/out) and text field ratio for extending or reducing the size of the tile.
Transform : Rotating and scaling the tile.
Elements : List of all the graphic elements of the pattern with their style editable properties (stroke, stroke-width, stroke-opacity, stroke-dash, fill, fill-opacity).