为何Figma导出的SVG图标在Mac版Chrome中偏移半像素？

核心原因分析 #

• 跨平台渲染策略差异：Mac的Retina高DPI屏幕下，Chrome对SVG的亚像素抗锯齿处理更细腻；而Windows版Chrome在像素对齐逻辑上更偏向整数网格。当SVG路径包含非整数坐标时，Mac Chrome会保留亚像素渲染的视觉效果，表现为半像素偏移，Windows则自动做了整数对齐，因此显示正常。
• SVG路径的非整数坐标：你提供的SVG路径里存在大量小数坐标（如13.55、4.45），这类坐标未对齐到像素网格。高DPI屏幕下的抗锯齿渲染会让浏览器为平滑边缘调整像素位置，最终导致视觉偏移——Figma导出时若未开启坐标取整，就会生成这类非整数路径。
• vertical-align:middle的计算偏差：vertical-align:middle基于父元素的基线和字体x-height的一半计算对齐位置，不同平台的字体渲染基线、x-height存在细微差异，叠加SVG非整数坐标的问题后，偏移效果被放大。

可行解决方案 #

• 修正SVG路径为整数坐标：把所有小数坐标调整为整数，让路径严格对齐像素网格。修改后的SVG示例：

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" preserveAspectRatio="xMidYMid meet" width="18" height="18" viewBox="0 0 18 18" style="vertical-align: middle;">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M14 10H4C3.44772 10 3 9.55228 3 9C3 8.44772 3.44772 8 4 8H14C14.5523 8 15 8.44772 15 9C15 9.55228 14.5523 10 14 10ZM9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2Z"/>
</svg>

• 更换vertical-align取值：改用vertical-align: text-bottom或vertical-align: baseline，这类取值的对齐逻辑跨平台更稳定；也可以给父元素设置line-height: 1，再配合图标对齐，减少计算偏差。
• 强制像素对齐：给SVG添加样式shape-rendering: crispEdges，关闭抗锯齿，强制路径对齐像素网格——适合对精度要求高的小图标，但会让线条边缘变锐利。

内容的提问来源于stack exchange，提问作者Richard Brook