如何解决vivo浏览器在访问大量SVG矢量图的页面时图标发虚的问题

vivo浏览器SVG图标发虚是因强制光栅化导致，解决方案是改用内联SVG并删除width/height属性、用em单位CSS控制尺寸、禁用transform缩放，伪元素图标可用Data URL或image-set回退。

vivo浏览器在访问含大量SVG矢量图的页面时图标发虚，是因为其内核（基于Chromium但存在定制渲染路径）对加载的SVG会强制光栅化为固定DPR位图，再按CSS尺寸缩放，高缩放比下插值失真严重；该问题在X Fold3系列折叠屏及部分vivo S系列机型上尤为明显。

禁用img标签加载SVG，改用内联SVG

第一步：定位所有使用引入图标的HTML位置，逐个替换为内联代码。

第二步：打开原始SVG文件，删除width和height属性（哪怕写的是width="100%"也必须删），仅保留viewBox属性，例如viewBox="0 0 24 24"。这一步不可跳过——vivo浏览器遇到带width/height的SVG标签，会直接忽略viewBox并降级为位图渲染。

第三步：将精简后的SVG代码（包括到全部内容）直接粘贴进HTML对应位置，不要用外部引用或JS动态注入。内联是唯一能绕过vivo浏览器SVG光栅化拦截链的方式。

用CSS控制内联SVG尺寸，禁止transform缩放

给所有内联SVG添加统一class，例如class="inline-icon"。

在CSS中写：.inline-icon { width: 1.2em; height: 1.2em; vertical-align: -0.15em; }。用em单位而非px，确保随父级字体大小响应式缩放。

【关键】绝对不要用transform: scale(1.5)放大SVG——vivo浏览器对该属性的重绘路径会二次采样，即使源SVG是内联的，也会立刻变糊。

需要适配深色模式？把里的fill="#333"改成fill="currentColor"，然后靠父容器的color值控制颜色，这样既省代码又避免因CSS变量未生效导致的渲染异常。

为伪元素图标使用Data URL背景

方法一：适用于::before/::after中的装饰性小图标（如按钮左侧箭头、表单项右侧清空图标）。

将SVG源码精简：删除声明、注释、多余空格；确保有viewBox；移除所有width/height；将、>、"等字符URL编码为%3C、%3E、%22。

拼成Data URL格式：url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24'%3E%3Cpath d='...'/%3E%3C/svg%3E")，直接赋给background-image。

方法二：若需兼容vivo旧版浏览器（版本号<15.2.5.0），改用image-set()提供PNG回退：background-image: image-set("icon.svg" 1x, "icon@2x.png" 2x);。注意@2x.png必须是真实双倍分辨率切片，不能是CSS放大生成的。