is this a svg stroke-width bug in chrome? - html

Question

Im trying to create a svg dot that i can scale up using stroke width.
I want to controll all my icons stroke-width with a variable and to do this i need to be able to create dots not just lines, but im getting some weird results when i have a small circle or a circular path and i increase the stroke width.
The red color is the circle fill, the blue color is the stroke but when increasing the stroke width im getting a gap between the fill and the stroke for some reason. (i used zoom 2000% to make everything bigger)
svg{
zoom: 3000%;
margin-top: 1px;
fill: red;
stroke: blue;
}
body{
display: flex;
div{
display: flex;
flex: 1;
align-items: center;
flex-direction: column;
height: 100%;
padding: 20px 0;
}
}
<div>
stroke-width: 1px;
<svg stroke-width="1" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
<g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
<path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
<circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
</g>
</svg>
</div>
<div>
stroke-width: 2px;
<svg stroke-width="2" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
<g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
<path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
<circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
</g>
</svg>
</div>
<div>
stroke-width: 3px;
<svg stroke-width="3px" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
<g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
<path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
<circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
</g>
</svg>
</div>
<div>
stroke-width: 4px;
<svg stroke-width="4px" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
<g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
<path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
<circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
</g>
</svg>
</div>

Answer 1

Trying to draw circles whose stroke is more than double the radius is not a good idea. As you have found, the behaviour in that situation is unreliable, and many 2D rendering libraries don't handle it gracefully. The correct behaviour isn't defined in the SVG spec either.
However, there is a simple solution to your problem. Simply draw a zero length line that has round end caps. The good news is that this is not a trick. It is safe to do because this behaviour is specified in the spec. And all SVG renderers handle it correctly.
svg{
margin-top: 1px;
fill: none;
stroke: blue;
stroke-linecap: round;
}
body{
display: flex;
div{
display: flex;
flex: 1;
align-items: center;
flex-direction: column;
height: 100%;
padding: 20px 0;
}
}
<div>
stroke-width: 1px;
<svg stroke-width="1" width="120" height="120" viewBox="0 0 4 4">
<path d="M2,2h0"/>
</svg>
</div>
<div>
stroke-width: 2px;
<svg stroke-width="2" width="120" height="120" viewBox="0 0 4 4">
<path d="M2,2h0"/>
</svg>
</div>
<div>
stroke-width: 3px;
<svg stroke-width="3" width="120" height="120" viewBox="0 0 4 4">
<path d="M2,2h0"/>
</svg>
</div>
<div>
stroke-width: 4px;
<svg stroke-width="4" width="120" height="120" viewBox="0 0 4 4">
<path d="M2,2h0"/>
</svg>
</div>