Revision control
++ <svg width="400" height="100" viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
++
++ <filter id="flood" x="0" y="0" width="1" height="1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" >
++ <feFlood flood-color="green" x="0" y="0" width="1" height="1"/>
++ </filter>
++
++ <symbol id="myDot1" width="10" height="20" viewBox="0 0 2 2" preserveAspectRatio="xMinYMin meet" filter="url(#flood)">
++ <circle cx="1" cy="1" r="1" />
++ </symbol>
++ <symbol id="myDot2" width="10" height="20" viewBox="0 0 2 2" preserveAspectRatio="xMaxYMin slice" filter="url(#flood)">
++ <circle cx="1" cy="1" r="1" />
++ </symbol>
++ <symbol id="myDot3" width="10" height="20" viewBox="0 0 2 2" preserveAspectRatio="xMinYMax slice" filter="url(#flood)">
++ <circle cx="1" cy="1" r="1" />
++ </symbol>
++ <symbol id="myDot4" width="10" height="20" viewBox="0 0 2 2" preserveAspectRatio="xMaxYMax slice" filter="url(#flood)">
++ <circle cx="1" cy="1" r="1" />
++ </symbol>
++ <symbol id="myDot5" width="10" height="20" viewBox="0 0 2 2" preserveAspectRatio="xMinYMin slice" filter="url(#flood)">
++ <circle cx="1" cy="1" r="1" />
++ </symbol>
++
++ <!-- All instances of our symbol -->
++ <use href="#myDot1" x="5" y="5" style="opacity:1.0" />
++ <use href="#myDot2" x="20" y="5" style="opacity:0.8" />
++ <use href="#myDot3" x="35" y="5" style="opacity:0.6" />
++ <use href="#myDot4" x="50" y="5" style="opacity:0.4" />
++ <use href="#myDot5" x="65" y="5" style="opacity:0.2" />
++ </svg>