Ionic图标与SVG图片在特定OPPO Android设备显示异常问题求助

问题根因 #

• 搭载ColorOS 5.2.1的OPPO A5s使用的定制系统WebView存在矢量图形渲染缺陷，该版本系统对WebView的SVG解析、字体图标渲染逻辑做了非标准修改，且仅在联发科平台的该批次机型上存在该bug，更高版本ColorOS或其他品牌机型的WebView无此问题，因此其他设备测试正常。
• Ionic默认的ion-icon组件优先采用内联SVG模式加载图标，该模式的SVG代码结构刚好触发了该WebView的解析错误，此前遇到的SVG图片结构错乱也是同一缺陷导致的。

相关问题截图：

可行解决方案 #

方案1：强制ion-icon降级为字体图标模式 #

在项目根配置中关闭ion-icon的内联SVG加载逻辑，强制使用字体图标模式渲染，该方案改造成本最低，适配范围最广。
在app.module.ts的Ionic模块初始化中添加如下配置：

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [
    IonicModule.forRoot({
      svgIcons: false, // 关闭内联SVG图标模式
      iconMode: 'md'
    })
  ]
})
export class AppModule {}

修改后重新编译打包即可在该机型上正常显示图标。

方案2：替换问题场景的图标为PNG资源 #

如果方案1无法覆盖所有异常场景，可将侧边菜单等出现异常的图标替换为多倍率的PNG格式资源，直接使用<img>标签加载，完全避开SVG渲染逻辑。

方案3：替换应用内置WebView内核 #

如果应用需要兼容更多旧款定制系统机型，可在应用中集成第三方通用WebView内核，替代设备自带的系统WebView，统一不同设备的渲染标准，从根源上解决各类WebView兼容性问题。

内容的提问来源于stack exchange，提问作者Houssem TRABELSI