SVG嵌入img标签兼容IE后Chrome显示异常问题排查

嘿，我来帮你搞定这个SVG适配的坑！我之前做项目时也踩过几乎一模一样的雷，咱们一步步拆解问题出在哪，怎么解决：

问题根源 #

你遇到的核心问题是SVG缺少viewBox属性，同时错误地移除了固有尺寸属性：

• 老旧IE对<img>里的SVG支持很挑剔，必须通过viewBox来明确SVG的坐标系统，否则它没法正确计算缩放比例；
• 当你移除SVG的width和height后，Chrome失去了SVG的固有尺寸参考，不知道该以多大的基础尺寸来缩放，自然就显示异常了。

正确的解决方案 #

只需要给你的SVG添加两个关键配置，就能同时兼容IE和现代浏览器：

1. 添加viewBox属性
   viewBox是SVG缩放的核心，它定义了SVG画布的坐标范围。你的SVG原始尺寸是264x264，所以给根<svg>标签加上：

   viewBox="0 0 264 264"
   

   这个值的意思是：画布从左上角(0,0)开始，宽264，高264，浏览器会基于这个范围来自动缩放所有图形元素。

2. 保留或合理设置width/height
   没必要完全移除这两个属性，你可以：

   • 保留原始的width="264"和height="264"作为SVG的默认固有尺寸；
   • 或者改成width="100%"和height="100%"，让SVG自适应容器大小（推荐配合preserveAspectRatio使用）。

   另外，加上preserveAspectRatio="xMidYMid meet"（这是默认值，但明确写出来更稳妥），确保缩放时保持图形的宽高比，不会拉伸变形。

修改后的完整SVG代码 #

<svg width="264" height="264" viewBox="0 0 264 264" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
  <g>
    <title>background</title>
    <rect x="-1" y="-1" width="266" height="266" id="canvas_background" fill="none"/>
    <g id="canvasGrid" display="none">
      <rect id="svg_1" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/>
    </g>
  </g>
  <g>
    <title>Layer 1</title>
    <ellipse fill="#000000" stroke-width="0" cx="132.081358" cy="132.179138" id="svg_3" rx="132" ry="132" stroke="#fff"/>
    <ellipse fill="#000000" stroke="#fff" stroke-width="6" cx="132.081346" cy="132.17914" id="svg_5" rx="126" ry="126"/>
    <ellipse fill="#000000" stroke="#fff" stroke-width="7" cx="132.081365" cy="213.774884" id="svg_13" rx="44" ry="44"/>
    <line fill="none" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="12.496805" y1="168.812302" x2="251.665903" y2="168.812302" id="svg_24" stroke-linejoin="null" stroke-linecap="null" stroke="#fff"/>
    <ellipse fill="#d80202" stroke="#fff" stroke-width="7" cx="132.081369" cy="50.410766" id="svg_6" rx="44" ry="44"/>
    <line fill="none" stroke="#fff" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="132.08135" y1="95.543239" x2="132.08135" y2="166.831116" id="svg_26" stroke-linejoin="null" stroke-linecap="null"/>
  </g>
</svg>

最后一步：控制img标签的显示大小 #

在你的CSS里给<img>设置合适的样式，比如让它自适应容器：

.logo-img {
  width: 100%;
  height: auto;
}

这样不管是IE还是Chrome，SVG都会完美缩放，不会出现显示异常的问题。

内容的提问来源于stack exchange，提问作者Randy Hall