No matter what I try, the displayed circle is not 4mm on a mobile browser. I have tried embedding the svg in an html and using the meta tags and it had no effect.. I have tried using viewport css rules, but they seem unimplemented. I have tried both Firefox mobile and chrome. Is there any other way?
mm is an unusual value in the web world but it is a valid length in CSS.
The simplest method for me would be to have an square SVG viewbox with a circle element 100% wide/tall that takes up the full SVG. This avoids pixel rounding I believe.
Place the SVG in a div and give that 4mm in width then center as desired.
div {
width: 4mm;
}
/* centering method */
/* but pick your own */
div {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="0 0 100 100">
<circle cx="50" cy="50" r="50" style="fill:#ff0000"/>
</svg>
</div>