<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 600"> <!-- 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> <!-- If adding more tests here, be sure to update the viewBox on the root svg element --> </svg>