Files used for all examples

Right-click, save ...

• patterns.shtml
• pattern0.svg (hatch)
• pattern1.svg (cross-hatch)
• pattern2.svg (trees)

Technical Details

If you "Zoom-In" in the above example you probably realize small gaps within the lines at a certain stage (x=105px). This phenomenon is the result of the pattern definition. In this example one pattern tile represents an area of 105 x 105 pixels. Each hatching line within one tile has to be specified. So gaps will appear, if the geometry has a bigger size (here: 100 x 200px). In order to avoid these gaps, every single line has to be defined in relation to the bounding box of the object. This is not very reasonable due to the fact that it causes a complicated generation of much code. Such files are performance consuming.

Conclusion: the SVG1.0 specification doesn't offer enough possibilities to create diagonal hatching in a convenient way. But as the other examples show, it is a useful method for other patterns:

Technical Details

This little code snippet defines one cross-hatching type (here: hatch00):

<pattern id="hatch00" patternUnits="userSpaceOnUse"
                          x="0" y="0" width="10" height="10">
  <g style="fill:none; stroke:black; stroke-width:1">
    <path d="M0,0 l10,10"/>
    <path d="M10,0 l-10,10"/>
  </g>
</pattern>

The patternUnits attribute defines the transformation of the coordinate system of one pattern tile. useSpaceOnUse translates the origin of the pattern to the origin of the element which is referencing the pattern. The origin of the pattern element can be further translated by x and y. The width and height attributes defining the absolute width and height of this coordinate system. One tile of "hatch00" has the size of 10x10px and contains two paths. In order to fill an object with this pattern, it has to be referenced as a style:

<path d="M0 50 l100 -50 100 20 -50 50 -100 20z"/>
      style="fill:url(#hatch00);stroke:B42D25;stroke-width:2;"

Conclusion: cross-hatching is simple to create and tiny in its definition.

Technical Details

Define a symbol as you may use it alone anywhere in your drawing. See the symbols section for definition and use.

<symbol id="broadLeave" overflow="visible"
              style="fill:none;stroke:green;stroke-width:2;">
  <path d="M0 15 l0 -10"/>
  <path d="M0 5 a6 6 0 1 1 -3.5 -10
	                  a6 6 0 1 1 7 0 a6 6 0 1 1 -3.5 10z"/>
</symbol>

Also in the defs section of the file header you will create a pattern. For now no basic shapes as lines are applied here but an instance (use) of the above definded symbol.

<pattern id="pat01" patternUnits="userSpaceOnUse" width="30"
                                                 height="45">
  <use xlink:href="#broadLeave"
	            transform="translate(15,22.5) scale(0.5)"/>
</pattern>

Most critical aspect is the choice of the right transformation which can be done in several ways. Here, one pattern tile is 30px of width and 45px of height. In order to center the "broadLeave" symbol, the instance has to be translated 15px in x- and 22.5px in y-direction. To reduce the graphical conciseness, the instance of the symbol is scaled down by 0.5.

Conclusion: Individual symbols can be used for wide range of the creation of different patterns.