17/1. példa kódja

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="400" height="600">

<defs>
<mask id="piros" x="0" y="0" width="1" height="1"
     maskContentUnits="objectBoundingBox">
	<rect width="1" height="1" style="fill: red; fill-opacity: 1;"/>
</mask>

<mask id="zold" x="0" y="0" width="1" height="1"
     maskContentUnits="objectBoundingBox">
	<rect width="1" height="1" style="fill: green; fill-opacity: 1;"/>
</mask>

<mask id="kek" x="0" y="0" width="1" height="1"
     maskContentUnits="objectBoundingBox">
	<rect width="1" height="1" style="fill: blue; fill-opacity: 1;"/>
</mask>

<mask id="feher" x="0" y="0" width="1" height="1"
     maskContentUnits="objectBoundingBox">
	<rect width="1" height="1" style="fill: white; fill-opacity: 1;"/>
</mask>
</defs>

<g style="mask: url(#kek)">
<rect x="10" y="10" width="80" height="80" style="fill: red;"/>
<rect x="110" y="10" width="80" height="80" style="fill: green;"/>
<rect x="210" y="10" width="80" height="80" style="fill: blue;"/>
<rect x="310" y="10" width="80" height="80" style="fill: black;"/>
</g>
<text x="200" y="110" 
      style="font-family: sans-serif; text-anchor: middle; font-size: 16;">
Kék maszk
</text>

<g style="mask: url(#zold)">
<rect x="10" y="160" width="80" height="80" style="fill: red;"/>
<rect x="110" y="160" width="80" height="80" style="fill: green;"/>
<rect x="210" y="160" width="80" height="80" style="fill: blue;"/>
<rect x="310" y="160" width="80" height="80" style="fill: black;"/>
</g>
<text x="200" y="260"
     style="font-family: sans-serif; text-anchor: middle; font-size: 16;">
Zöld maszk
</text>

<g style="mask: url(#piros)">
<rect x="10" y="310" width="80" height="80" style="fill: red;"/>
<rect x="110" y="310" width="80" height="80" style="fill: green;"/>
<rect x="210" y="310" width="80" height="80" style="fill: blue;"/>
<rect x="310" y="310" width="80" height="80" style="fill: black;"/>
</g>
<text x="200" y="410"
      style="font-family: sans-serif; text-anchor: middle; font-size: 16;">
Piros maszk
</text>

<g style="mask: url(#feher)">
<rect x="10" y="460" width="80" height="80" style="fill: red;"/>
<rect x="110" y="460" width="80" height="80" style="fill: green;"/>
<rect x="210" y="460" width="80" height="80" style="fill: blue;"/>
<rect x="310" y="460" width="80" height="80" style="fill: black;"/>
</g>
<text x="200" y="560"
     style="font-family: sans-serif; text-anchor: middle; font-size: 16;">
Fehér maszk
</text>

</svg>