SVG Patterns

SVG views plain color, gradients, and patterns as three types of paint servers that can be painted on an SVG canvas.

Listing 6.19 demonstrates a simple SVG pattern and Figure 06.19 illustrates it.

Figure 06.19. A simple SVG pattern.

Listing 6.19. (Pattern01.svg)
 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="6cm" height="4cm" viewBox="0 0 800 400"> <defs> <pattern id="CirclePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 10 10" > <circle cx="5" cy="5" r="2" style="stroke:pink; fill:green;"/> ...

Get Designing SVG Web Graphics 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.