<!DOCTYPE html>
<svg width="200" height="200">
<linearGradient id="g" x2="0" y2="1">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</linearGradient>
<pattern id="p" width="0.25" height="0.25" viewBox="0 0 10 10">
<rect width="5" height="5"/>
<rect x="5" y="5" width="5" height="5"/>
</pattern>
<g transform="scale(10)">
<rect x="2.5" y="2.5" width="4" height="4"
fill="url(#g)" stroke="url(#g)"
vector-effect="non-scaling-stroke" stroke-width="10"
paint-order="stroke fill"/>
<rect x="10" y="2.5" width="4" height="4"
fill="url(#p)" stroke="url(#p)"
vector-effect="non-scaling-stroke" stroke-width="10"
paint-order="stroke fill"/>
</g>
</svg>