why my icon is slightly sliding half a pixel by itself? - svg

Question

So from Figma, I exported icon as SVG and put it in my code.
my UI Designer mentioned it looks different in Chrome on Mac, somehow it slides from the center
I tried to check it but it seems fine on my computer (Chrome on Windows),
I tried to overlay Figma box and SVG box.
This is the detailed version with grid and 1px border.
my UI Designer tried to put on grid and it shows that it slides half a pixel.
I only put styling : vertical-align: middle; and didn't try flex center or anything bcs other icons seem fine.
here's the SVG snippet
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="18"
height="18"
viewBox="0 0 18 18"
style="vertical-align: middle;">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.55 10.05H4.45001C3.86971 10.05 3.40001 9.57958 3.40001 8.99998C3.40001 8.42038 3.86971 7.94998 4.45001 7.94998H13.55C14.1303 7.94998 14.6 8.42038 14.6 8.99998C14.6 9.57958 14.1303 10.05 13.55 10.05ZM9 2C5.1339 2 2 5.1346 2 9C2 12.8654 5.1339 16 9 16C12.8661 16 16 12.8654 16 9C16 5.1346 12.8661 2 9 2Z"/>
</svg>
My friend mentioned it might be because of anti-aliasing changing the SVG Path coordinates? I tried to google up but found nothing, I'm just curious if anyone knows better about this

Answer 1

The path itself is exactly 14x14, so in this example I moved the path to 0,0 and made the viewBox="0 0 14 14". Now without all the other attributes the SVG should fill out the parent element. Now, it is easier to control the width and the height. In some cases you might need to set the SVG to display block.
div {
margin: 1px;
}
.w100 {
width: 200px;
background-color: orange;
}
.w100 svg {
display: block;
}
.em1 {
background-color: lime;
width: 200px;
}
.em1 svg {
height: 1em;
}
<div class="w100">
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="none"
viewBox="0 0 14 14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.55 8.05 H 2.45 C 1.8697 8.05 1.4 7.5796 1.4 7 C 1.4 6.4204 1.8697 5.95 2.45 5.95 H 11.55 C 12.1303 5.95 12.6 6.4204 12.6 7 C 12.6 7.5796 12.1303 8.05 11.55 8.05 Z M 7 0 C 3.1339 0 0 3.1346 0 7 C 0 10.8654 3.1339 14 7 14 C 10.8661 14 14 10.8654 14 7 C 14 3.1346 10.8661 0 7 0 Z"/>
</svg>
</div>
<div class="em1">
<span>Test: </span>
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="none"
viewBox="0 0 14 14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.55 8.05 H 2.45 C 1.8697 8.05 1.4 7.5796 1.4 7 C 1.4 6.4204 1.8697 5.95 2.45 5.95 H 11.55 C 12.1303 5.95 12.6 6.4204 12.6 7 C 12.6 7.5796 12.1303 8.05 11.55 8.05 Z M 7 0 C 3.1339 0 0 3.1346 0 7 C 0 10.8654 3.1339 14 7 14 C 10.8661 14 14 10.8654 14 7 C 14 3.1346 10.8661 0 7 0 Z"/>
</svg>
</div>