Patterns

Note

You must have the SVG viewer 3.0 and higher to view patterns.

Objects can be filled with interesting patterns in SVG. To create a pattern, use the <pattern> element, then define the pattern as a drawing within that element. Like gradients, patterns are defined within the <defs> element. The <pattern> element is then given an id value and is referenced by either the fill or stroke value of an object. Figure 5-14 shows a pattern applied to an ellipse.

Figure 5-14. Pattern applied to an ellipse.

Take a careful look at this image. One slanted triangle has been defined as a path, and that path has been placed inside a <pattern> element. ...

Get SVG for Web Developers now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.