线高图像居中

Question

我有这个Codepen： https://codepen.io/stephendesjardins/project/editor/ZyamgR

ul {
  list-style-image: url(icon.svg);
  vertical-align:middle;
}

<svg version="1.1" id="ic-puce" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="6px" height="6px"
     viewBox="0 0 6 6" style="enable-background:new 0 0 6 6;" xml:space="preserve">
<style type="text/css">
    .st0{fill:black;}
</style>
<circle class="st0" cx="3" cy="3" r="3"/>
</svg>

它用svg替换列表类型的图像，但是由于某种原因，它不在中心对齐。

我不想使用之前的 content方法或 background-image方法，因此解决方案需要不在此范围之内。