<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 640 640">
<!-- added namespace declaration in above svg element, stelt, 2006 -->
<defs>
<radialGradient id="g1" gradientUnits="objectBoundingBox"
cx="0" cy="0" r="1.5">
<stop offset="0" stop-color="#ffee00" />
<stop offset="1" stop-color="#f80" />
</radialGradient>
<radialGradient id="g2" gradientUnits="objectBoundingBox"
cx="0" cy="0" r="1.5">
<stop offset="0" stop-color="#0ef" />
<stop offset="1" stop-color="#08f" />
</radialGradient>
<circle id="c" r="30"
fill="url(#g1)" stroke="black" opacity="0.5" />
<rect id="d" width="55" height="45"
fill="url(#g2)" stroke="black" opacity="0.5" />
<circle id="a" r="30"
fill="url(#g1)" stroke="black" />
<rect id="b" width="55" height="45"
fill="url(#g2)" stroke="black" />
</defs>
<text x="260" y="50" font-family="verdana" font-size="20" fill="black">Opaque</text>
<g transform="translate(0 40)">
<!-- clear -->
<g transform="translate(20, 40)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
clear
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="clear" />
</g>
</g>
<!-- src -->
<g transform="translate(120, 40)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
src
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="src" />
</g>
</g>
<!-- dest -->
<g transform="translate(220, 40)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
dst
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="dst" />
</g>
</g>
<!-- src-over -->
<g transform="translate(320, 40)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
src-over
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="src-over" />
</g>
</g>
<!-- dst-over -->
<g transform="translate(420, 40)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
dst-over
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="dst-over" />
</g>
</g>
<!-- src-in -->
<g transform="translate(520, 40)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
src-in
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="src-in" />
</g>
</g>
<!-- dst-in -->
<g transform="translate(20, 160)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
dst-in
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="dst-in" />
</g>
</g>
<!-- src-out -->
<g transform="translate(120, 160)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
src-out
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="src-out" />
</g>
</g>
<!-- dst-out -->
<g transform="translate(220, 160)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
dst-out
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="dst-out" />
</g>
</g>
<!-- src-atop -->
<g transform="translate(320, 160)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
src-atop
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="src-atop" />
</g>
</g>
<!-- dst-atop -->
<g transform="translate(420, 160)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
dst-atop
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="dst-atop" />
</g>
</g>
<!-- xor -->
<g transform="translate(520, 160)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
xor
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#a" />
<use x="25" y="35" xlink:href="#b" comp-op="xor" />
</g>
</g>
</g>
<text x="220" y="320" font-family="verdana" font-size="20" fill="black">Partially Transparent</text>
<g transform="translate(0 80)">
<!-- clear -->
<g transform="translate(20, 280)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
clear
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="clear" />
</g>
</g>
<!-- src -->
<g transform="translate(120, 280)">
<text x="10" y="0" font-family="verdana" font-size="16" fill="black">
src
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="src" />
</g>
</g>
<!-- dst -->
<g transform="translate(220, 280)">
<text x="20" y="0" font-family="verdana" font-size="16" fill="black">
dst
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="dst" />
</g>
</g>
<!-- src-over -->
<g transform="translate(320, 280)">
<text x="10" y="0" font-family="verdana" font-size="16" fill="black">
src-over
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="src-over" />
</g>
</g>
<!-- darken -->
<g transform="translate(420, 280)">
<text x="10" y="0" font-family="verdana" font-size="16" fill="black">
dst-over
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="dst-over" />
</g>
</g>
<!-- src-in -->
<g transform="translate(520, 280)">
<text x="10" y="0" font-family="verdana" font-size="16" fill="black">
src-in
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="src-in" />
</g>
</g>
<!-- dst-in -->
<g transform="translate(20, 400)">
<text x="0" y="0" font-family="verdana" font-size="16" fill="black">
dst-in
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="dst-in" />
</g>
</g>
<!-- src-out -->
<g transform="translate(120, 400)">
<text x="0" y="0" font-family="verdana" font-size="16" fill="black">
src-out
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="src-out" />
</g>
</g>
<!-- dst-out -->
<g transform="translate(220, 400)">
<text x="0" y="0" font-family="verdana" font-size="16" fill="black">
dst-out
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="dst-out" />
</g>
</g>
<!-- src-atop -->
<g transform="translate(320, 400)">
<text x="0" y="0" font-family="verdana" font-size="16" fill="black">
src-atop
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="src-atop" />
</g>
</g>
<!-- dst-atop -->
<g transform="translate(420, 400)">
<text x="0" y="0" font-family="verdana" font-size="16" fill="black">
dst-atop
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="dst-atop" />
</g>
</g>
<!-- xor -->
<g transform="translate(520, 400)">
<text x="0" y="0" font-family="verdana" font-size="16" fill="black">
xor
</text>
<g enable-background="new">
<use x="30" y="40" xlink:href="#c" />
<use x="25" y="35" xlink:href="#d" comp-op="xor" />
</g>
</g>
</g>
</svg>
