<!DOCTYPE html>
<base href="http://www.example.com/">
<svg width="400" height="300">
<linearGradient id="paint">
<stop stop-color="green"/>
</linearGradient>
<linearGradient id="inheritedPaint" xlink:href="#paint"/>
<rect id="rect" width="100" height="100" fill="url(#paint) red"/>
<rect x="125" y="25" width="50" height="50" stroke="url(#paint) red" stroke-width="50"/>
<use x="200" xlink:href="#rect"/>
<rect x="300" width="100" height="100" fill="url(#inheritedPaint) red"/>
<filter id="filter" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
<feImage xlink:href="#rect"/>
</filter>
<rect y="100" width="100" height="100" fill="red" filter="url(#filter)"/>
<clipPath id="clip">
<rect y="50" width="100" height="50"/>
</clipPath>
<rect x="100" y="100" width="100" height="50" fill="green"/>
<g clip-path="url(#clip)" transform="translate(100, 100)">
<rect width="100" height="50" fill="red"/>
<rect y="50" width="100" height="50" fill="green"/>
</g>
<mask id="mask">
<rect y="50" width="100" height="50" fill="white"/>
</mask>
<rect y="100" x="200" width="100" height="50" fill="green"/>
<g mask="url(#mask)" transform="translate(200, 100)">
<rect width="100" height="50" fill="red"/>
<rect y="50" width="100" height="50" fill="green"/>
</g>
<pattern id="pattern" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="green"/>
</pattern>
<pattern id="inheritedPattern" xlink:href="#pattern"/>
<rect x="300" y="100" width="100" height="100" fill="url(#inheritedPattern) red"/>
<marker id="marker" refY="0.5">
<rect width="1" height="1" fill="green"/>
</marker>
<polyline points="0,250 100,250 200,250" stroke="red" stroke-width="100"
marker-start="url(#marker)" marker-mid="url(#marker)" marker-end="url(#marker)"/>
<radialGradient id="radial">
<stop stop-color="green"/>
</radialGradient>
<radialGradient id="inheritedRadial" xlink:href="#radial"/>
<rect x="300" y="200" width="100" height="100" fill="url(#inheritedRadial) red"/>
</svg>
Codebase Browser
chromium