SVG Check Button

by Akihiko Kusanagi

HTML

<svg height="0" width="0">
  <defs>
    <g id="checkbutton">
      <circle r="8" cy="8" cx="8" style="stroke:none" />
      <path d="M 3.6801386,8.536309 L 6.9552837,11.971756 L 12.41386,3.9557141" style="fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round" />
    </g>
  </defs>
</svg>
<svg height="16" width="16">
  <use xlink:href="#checkbutton" class="first" />
</svg>
<svg height="16" width="16">
  <use xlink:href="#checkbutton" class="second" />
</svg>
<svg height="16" width="16">
  <use xlink:href="#checkbutton" class="third" />
</svg>

CSS

.first {
  fill: #007fff;
  stroke: black;
  opacity: .9
}
.second {
  fill: #ff7f00;
  stroke: black;
  opacity: .2
}
.third {
  fill: #ff00ff;
  opacity: .5
}