如何缩放SVG时保持宽高比 仅设置CSS宽度自动适配高度

优先方案：纯CSS修改（无需调整SVG文件） #

直接补充.icon类的CSS属性即可，兼容大部分现代浏览器：

.icon {
  display: block;
  width: 10em;
  height: auto;
  /* 新增属性 start */
  /* 保证内容完整显示，避免超出viewBox的部分被裁切 */
  object-fit: contain;
  /* 覆盖SVG标签可能自带的固定宽高属性 */
  height: unset;
  /* 可选：手动指定当前SVG的宽高比，示例SVG的viewBox比例为448/512，其他比例按需替换即可 */
  /* aspect-ratio: 448/512; */
  /* 新增属性 end */
}

如果需要批量适配大量不同比例的SVG，不想逐个手动写宽高比，可以加一段极简JS配合处理：

// 批量读取所有.icon类SVG的viewBox比例，自动设置aspect-ratio
document.querySelectorAll('svg.icon').forEach(svg => {
  const viewBox = svg.getAttribute('viewBox')
  if (viewBox) {
    const [, , width, height] = viewBox.split(' ').map(Number)
    svg.style.aspectRatio = `${width}/${height}`
  }
})

备选方案：批量修改SVG属性（兼容全浏览器） #

如果CSS方案无法覆盖你的兼容需求，可以通过批量修改SVG标签解决，操作成本很低：
给所有SVG标签添加preserveAspectRatio="xMidYMid meet"属性即可，该属性会强制SVG在缩放时保持viewBox定义的宽高比，自动适配容器尺寸且不会裁切内容。
可以用编辑器的全局替换功能快速完成：搜索<svg ，替换为<svg preserveAspectRatio="xMidYMid meet" 。

异常原因说明 #

你遇到的水平裁切问题是因为示例SVG的path坐标最大值超出了viewBox定义的448宽度，默认渲染规则会裁切超出viewBox边界的内容，上述两个方案都会修正这个渲染逻辑。

内容的提问来源于stack exchange，提问作者Muhammad Rehan Saeed