circle { shape-rendering: crispEdges; }
circle { shape-rendering: auto; }
a renderização de formas define a prioridade de como seus SVGs devem ser renderizados. Você pode especificar auto, optimizeSpeed, crispEdges ou geometricPrecision, onde auto tenta acomodar velocidade e nitidez sem sacrificar a precisão. Por alguma razão, apenas uma dessas opções produz SVGs confusos … e são crispEdges.
Então, para precisão e bordas nítidas, use qualquer coisa, menos crispEdges