Tutorial by Examples

<svg width="400" height="400"> <defs> <pattern id="pattern1" width="0.2" height="0.2" patternUnits="objectBoundingBox"> <circle cx="10" cy="10" r="10" fill="#0000ff" /&...

SVG Patterns behave significantly differently than CSS background images when filling equivalent shapes. This can lead to significant surprises for new-comers to SVG. Below are examples of a pattern defined in all possible combinations of patternUnits and patternContentUnits - showing how these sett...

<svg width="800px" height="800px"> <defs> <pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" > <circle cx="10" cy="10" r="10" fill="blue" /> <...