矢量 SVG 转化位图 PNG：如何防止转出后边缘发虚、字迹模糊？

将高精度的矢量图 (.svg) 栅格化为易于发送的便携位图 (.png) 或 (.jpg) 是日常高频交互场景。但很多低质量转换器倒出来的 PNG 往往布满发虚起雾的粗糙感，这要通过数学网格原理来解决：

变糊的物理常识

矢量曲线转像素位图的过程称为“栅格化”。转换引擎（如浏览器后台 Canvas）需要对矢量几何尺寸进行重绘映射：

• 如果软件只是原封不动按照 SVG 内部默认的显示高宽（例如 $100 imes 100$ px）去画出一张 PNG 位图，生成的结果图物理像素只有 $100 imes 100$ px 宽。
• 这张图放在主流 DPR=2 或 DPR=3 的视网膜高端屏幕里，系统一放大拉长展示，边缘立马像“被揉搓过”一样不忍直视。

巧用“缩放乘因子 (Scale Multiplier)”转换机制

为了实现纤毫毕现的像素质感，转化矢量图时务必输入放大因子（如 2倍图 2x、3倍图 3x 或更高像素值）：

• 目标展示框: $100 imes 100$ px
• 真正转换像素: 设置 3x 倍率，生成物理尺寸 $300 imes 300$ px 的超高清 PNG。

转换程序是在后台先将数学矢量图形的所有圆角、文字轮廓等坐标进行公式级乘倍放大，再把极度敏锐流畅的轮廓落子于高清画布上，最终渲染出透明底、无任何杂色白边的顶级高清 PNG！