Source code
Revision control
Copy as Markdown
Other Tools
SVG Preview (Scaled)
<!-- 1. patternUnits -->
<defs>
<pattern id="patternUnits" width="80" height="80"
patternUnits="userSpaceOnUse">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/>
</g>
<!-- 2. patternContentUnits -->
<defs>
<pattern id="patternContentUnits" width="1" height="1"
patternContentUnits="objectBoundingBox">
<rect width="0.5" height="0.5" fill="blue"/>
<rect x="0.5" width="0.5" height="0.5" fill="red"/>
<rect y="0.5" width="0.5" height="0.5" fill="red"/>
<rect x="0.5" y="0.5" width="0.5" height="0.5" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 100)">
<rect width="100" height="100" stroke="black"
fill="url(#patternContentUnits)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black"
fill="url(#patternContentUnits)"/>
</g>
</g>
<!-- 3. patternTransform -->
<defs>
<pattern id="patternTransform" width="1" height="1"
patternTransform="rotate(45 50 50)">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 200)">
<rect width="100" height="100" stroke="black"
fill="url(#patternTransform)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black"
fill="url(#patternTransform)"/>
</g>
</g>
<!-- 4. preserveAspectRatio -->
<defs>
<pattern id="par" width="1" height="1" viewBox="0.1 0.1 0.6 0.85"
preserveAspectRatio="none">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 300)">
<rect width="100" height="100" stroke="black" fill="url(#par)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#par)"/>
</g>
</g>
<!-- 5. viewBox -->
<defs>
<pattern id="viewBox" width="1" height="1" viewBox="0.1 0.1 0.6 0.85"
preserveAspectRatio="none">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 400)">
<rect width="100" height="100" stroke="black" fill="url(#viewBox)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#viewBox)"/>
</g>
</g>
<!-- 6. xlink:href -->
<defs>
<pattern id="xlink" xlink:href="#xlinkRef"/>
<pattern id="xlinkRef" width="1" height="1">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 500)">
<rect width="100" height="100" stroke="black" fill="url(#xlink)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#xlink)"/>
</g>
</g>
<!-- 6. x, y -->
<defs>
<pattern id="xy" width="1" height="1" x="0.1" y="-0.1">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 600)">
<rect width="100" height="100" stroke="black" fill="url(#xy)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#xy)"/>
</g>
</g>
<!-- 7. width, height -->
<defs>
<pattern id="widthHeight" width="1" height="1">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 700)">
<rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/>
</g>
</g>
<!-- If adding more tests here, be sure to update the viewBox on the root svg
element -->
</svg>