To obtain the most precise points for the pentagon shape, you can easily retrieve them from the underlying pentagonal structure.
https://i.sstatic.net/gT5tf.gif
An uncomplicated JavaScript function to acquire these points would look something like this (REPL, which can be used for polygons with any number of edges n):
var n = 5;
var points = [];
for (var i=0; i < n; i++) {
var x = 50;
var y = -50;
var r = 25;
points.push([x + r * Math.sin(2 * Math.PI * i / n),
y + r * Math.cos(2 * Math.PI * i / n)]);
}
The resulting array represents the pentagon's points in a clockwise direction, starting at the top (all values are positive):
[ [ 50, -25 ],
[ 73.77641290737884, -42.27457514062631 ],
[ 64.69463130731182, -70.22542485937369 ],
[ 35.30536869268818, -70.22542485937369 ],
[ 26.22358709262116, -42.27457514062632 ] ]
The correct order for these points would be
points[x], where x = 0, 3, 1, 4, 2
.
These points can then be utilized in your example, ensuring they are rounded to the nearest pixel:
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="white" stroke="red" stroke-width="10" />
<circle cx="50" cy="50" r="30" stroke="red" stroke-width="10" fill="blue" />
<polygon points="50,25 35,70 73,42 26,42 65,70" style="fill:white;"/>
</svg>
</body>
</html>