vivo浏览器svg图标发虚是因强制光栅化导致，解决方案是改用内联svg并删除width/height属性、用em单位css控制尺寸、禁用transform缩放，伪元素图标可用data url或image-set回退。
vivo浏览器在访问含大量SVG矢量图的页面时图标发虚，是因为其内核（基于Chromium但存在定制渲染路径）对<img>加载的SVG会强制光栅化为固定DPR位图，再按CSS尺寸缩放，高缩放比下插值失真严重；该问题在X Fold3系列折叠屏及部分vivo S系列机型上尤为明显。
禁用img标签加载SVG，改用内联SVG
第一步：定位所有使用<img src="icon.svg">引入图标的HTML位置，逐个替换为内联<svg></svg>代码。
第二步：打开原始SVG文件，删除width和height属性（哪怕写的是width="100%"也必须删），仅保留viewBox属性，例如viewBox="0 0 24 24"。这一步不可跳过——vivo浏览器遇到带width/height的SVG标签，会直接忽略viewBox并降级为位图渲染。
第三步：将精简后的SVG代码（包括<svg></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是内联的，也会立刻变糊。
需要适配深色模式？把<path></path>里的fill="#333"改成fill="currentColor"，然后靠父容器的color值控制颜色，这样既省代码又避免因CSS变量未生效导致的渲染异常。
为伪元素图标使用Data URL背景
方法一：适用于::before/::after中的装饰性小图标（如按钮左侧箭头、表单项右侧清空图标）。
将SVG源码精简：删除<?xml>声明、注释、多余空格；确保有viewBox；移除所有width/height；将、<code>>、"等字符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旧版浏览器（版本号image-set()提供PNG回退：background-image: image-set("icon.svg" 1x, "icon@2x.png" 2x);。注意@2x.png必须是真实双倍分辨率切片，不能是CSS放大生成的。
