This chapter is from the book
This chapter is from the book
This chapter is from the book
SVG Patterns
Many visual objects have some kind of periodicity or pattern in their appearance. Likely, you will want to mimic that effect onscreen. The SVG pattern element provides us with a technique to create repeating visual patterns.
An SVG pattern is defined within a pattern element, typically nested within a defs element. The pattern element must have an id attribute to allow the pattern to be referenced as the paint to be used in a fill or stroke property later in the document.
A pattern element, apart from a necessary id attribute, has x, y, width, and height attributes, which define part of how the pattern will be laid out onscreen. In addition, this element has a viewBox attribute, which can be used to adjust the scaling of the pattern. The element or elements nested within the pattern element define the shape or shapes that make up a pattern. In Listing 3.23, there is single rect element nested within the pattern element, creating a pattern that consists of rectangles, which are used to fill an ellipse shape.
Listing 3.23 illustrates the use of the pattern element.
Listing 3.23 RectPattern.svg—A Straightforward SVG Pattern
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="600px" height="500px" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="RectanglePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 20 20" > <rect x="0" y="0" width="10" height="5" fill="red"/> </pattern> </defs> <rect fill="none" stroke="red" x="1" y="1" width="598" height="498"/> <ellipse fill="url(#RectanglePattern)" stroke="black" stroke-width="5" cx="300" cy="200" rx="250" ry="150" /> </svg>
Figure 3.15 shows the visual appearance produced by Listing 3.23.
Figure 3.15 A pattern of rectangles contained in an ellipse.){kind=link}
By altering values in the viewBox attribute of the pattern element, we can adjust the periodicity of the pattern. In Listing 3.24, we alter the final value in the viewBox attribute from 20 to 10. Effectively, that means we double the repeat of the pattern in a vertical direction.
Listing 3.24 RectPattern02.svg—Altering the Vertical Periodicity of the Pattern
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="600px" height="500px" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="RectanglePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50" viewBox="0 0 20 10" > <rect x="0" y="0" width="10" height="5" fill="red"/> </pattern> </defs> <rect fill="none" stroke="red" x="1" y="1" width="598" height="498"/> <ellipse fill="url(#RectanglePattern)" stroke="black" stroke-width="5" cx="300" cy="200" rx="250" ry="150" /> </svg>
Figure 3.16 shows the doubling of the vertical periodicity of the pattern.
){kind=link}
Figure 3.16 Doubling the vertical periodicity of a pattern.
The patternTransform attribute permits us to transform the individual components of the pattern. Listing 3.25 shows a skew transform applied to the rectangles that made up the pattern in Listing 3.23, RectPattern.svg. Transforms are described in Chapter 7, "Transformations in SVG."
Listing 3.25 RectPattern03.svg—Using the patternTransform Attribute
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="600px" height="500px" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="RectanglePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 20 20" patternTransform="skewX(15)"> <rect x="0" y="0" width="10" height="5" fill="red"/> </pattern> </defs> <rect fill="none" stroke="red" x="1" y="1" width="598" height="498"/> <ellipse fill="url(#RectanglePattern)" stroke="black" stroke-width="5" cx="300" cy="200" rx="250" ry="150" /> </svg>
Figure 3.17 shows the skewed rectangles that create the modified pattern as defined by the patternTransform attribute.
){kind=link}
Figure 3.17 Using a skew transform in the patternTransform attribute.
Patterns can be used in many ways. Many different graphic shapes, including path elements, may be nested within a pattern element definition. Therefore, any arbitrary shape can be used in an SVG pattern. To achieve a particular effect, you need to choose appropriate element content for the pattern element and likely adjust one or several of the attributes. In Chapter 21, "SVG and Perl," an example is developed using SVG and Perl.