svg_sample.txt

<svg id="svgcontent" width="470" height="100" viewBox="0 0 470 100" overflow="visible" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g style="pointer-events:all">
<rect fill="#00C389" stroke="#00C389" x="10"  y="30" width="60" height="10" fill-opacity="0.1" stroke-opacity="0.1"/>
<rect fill="#00C389" stroke="#00C389" x="75"  y="30" width="60" height="10" fill-opacity="0.25" stroke-opacity="0.25"/>
<rect fill="#00C389" stroke="#00C389" x="140" y="30" width="60" height="10" fill-opacity="0.4" stroke-opacity="0.4"/>
<rect fill="#00C389" stroke="#00C389" x="205" y="30" width="60" height="10" fill-opacity="0.55" stroke-opacity="0.55"/>
<rect fill="#00C389" stroke="#00C389" x="270" y="30" width="60" height="10" fill-opacity="0.7" stroke-opacity="0.7"/>
<rect fill="#00C389" stroke="#00C389" x="335" y="30" width="60" height="10" fill-opacity="0.95" stroke-opacity="0.95"/>
<rect fill="#009A6D" stroke="#009A6D" x="400" y="30" width="60" height="10" fill-opacity="1" stroke-opacity="1"/>

<text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="20" y="20" x="40" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">A0</text>
<text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="20" y="20" x="105" stroke-width="0" stroke="#000000" fill="#000000">A1</text>
<text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="20" y="20" x="170" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">A2</text>
<text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="20" y="20" x="235" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">B1</text>
<text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="20" y="20" x="300" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">B2</text>
<text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="20" y="20" x="365" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">C1</text>
<text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="20" y="20" x="430" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">C2</text>

<text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="12" y="65" x="40" stroke-width="0" stroke="#000000" fill="#000000">beginner</text><text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="12" y="65" x="137.5" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">basis gebruiker</text><text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="12" y="65" x="267.5" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">onafhankelijke gebruiker</text><text xml:space="preserve" text-anchor="middle" font-family="Helvetica" font-size="12" y="65" x="397.5" stroke-width="0" stroke="#bbbbbb" fill="#bbbbbb">bedreven gebruiker</text>

<!-- coloring the orange circle in the score bar  -->
<circle id="svg_cmp_200" cx="83.75" cy="35" r="8" stroke="#FF5000" stroke-width="4" fill="#ffffff"/>

</g></svg>