<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"> <style type="text/css" > rect { stroke-width: 30px; } </style> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0" stop-color="blue"/> <stop offset="1" stop-color="yellow"/> </linearGradient> <linearGradient id="grad2" x1="360" y1="500" x2="560" y2="600" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.25,1)"> <stop offset="0" stop-color="blue"/> <stop offset="1" stop-color="yellow"/> </linearGradient> <pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="scale(1,0.5), skewX(45)"> <rect x="0" y="0" width="20" height="20" fill="red"/> <rect x="20" y="0" width="20" height="20" fill="green"/> <rect x="0" y="20" width="20" height="20" fill="blue"/> <rect x="20" y="20" width="20" height="20" fill="yellow"/> </pattern> <rect id="rect" width="200" height="100" fill="none"/> </defs> <rect x="40" y="40" width="200" height="100" fill="none" stroke="url(#grad1)"/> <rect x="40" y="200" width="200" height="100" fill="none" stroke="url(#grad2)" /> <use xlink:href="#rect" transform="translate(40, 360)" stroke="url(#pattern)"/> <use xlink:href="#rect" x="40" y="520" stroke="green"/> </svg>