在浏览器渲染 SVG 的时候，可以通过 shape-rendering 这一属性，来控制浏览器对 SVG 抗锯齿效果的展示。shape-rendering 支持从三个纬度来权衡 SVG 的渲染效果，这三个纬度分别是：速度、曲线精细度以及曲线的锐利程度。
auto，这个是默认值，表示由浏览器来决定改如何显示optimizeSpeed，顾名思义，这个要求浏览器以渲染的速度优先，抗锯齿可能会被浏览器关闭crispEdges，这个选项要求浏览器以曲线的锐利程度为第一优先级。这种情况下，速度和精细度的优先级会被降低。浏览器可能会关闭抗锯齿，或者只针对接近垂直和水平的线才开启抗锯齿的功能。同时，浏览器可能会微调线的位置和宽度，以适应显示器的物理像素点geometricPrecision，这个选项要求浏览器以更好的精度来渲染图像，为此可能会牺牲渲染的性能（速度）和边界的清晰度
下图从左到右分别展示了 geometricPrecision，crispEdges 和 optimizeSpeed 三种情况下，同一个圆的显示效果。
不难看出，geometricPrecision 的效果是最平滑的，但是边缘清晰度不足；crispEdges 边缘很锐利，但是有一些毛边（越是低分辨率的屏幕，效果越明显）；optimizeSpeed 的显示效果也明显有毛边，不过效果和 crispEdges 略微不同，可以看得出底层使用的算法是不太一样的。
上图的 HTML 代码如下：
<svg viewBox="0 0 640 200" xmlns="http://www.w3.org/2000/svg" width="740">
<circle
cx="100"
cy="100"
r="100"
shape-rendering="geometricPrecision"
fill="#ff8787"
/>
<circle
cx="100"
cy="100"
r="100"
shape-rendering="crispEdges"
fill="#da77f2"
/>
<circle
cx="100"
cy="100"
r="100"
shape-rendering="optimizeSpeed"
fill="#748ffc"
/>
</svg>另外，除了在 SVG 中直接写属性之外，也可以通过 CSS 来给 SVG 加上相关的 shape-rendering 值：
svg {
shape-rendering: geometricPrecision;
}MDN 的相关介绍见这里。