如何在不修改SVG文件的前提下，通过<img>标签缩放SVG？

当无法修改外部或共享库中的SVG文件时，以下几种方法可以实现SVG的正常缩放，避免裁剪问题：

方法1：使用CSS背景图实现缩放 #

将SVG作为元素的背景图，通过background-size: contain让SVG自适应容器尺寸并完整显示，不会被裁剪。示例代码：

<div style="width: 60px; height: 30px; background-image: url('logo.svg'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>

• background-size: contain：保证SVG按比例缩放并完整适配容器
• background-position: center：让SVG在容器中居中显示（可选）

方法2：使用内联SVG + <use>标签引用外部SVG #

通过内联SVG包裹外部SVG，手动设置内联SVG的宽高和viewBox（需要知道原始SVG的宽高，若未知可通过JS动态获取），实现精准缩放：

已知原始SVG宽高的情况 #

假设原始SVG宽为120px、高为60px，示例代码：

<svg width="60px" height="30px" viewBox="0 0 120 60">
  <use href="logo.svg"></use>
</svg>

未知原始SVG宽高的情况 #

用JavaScript动态获取外部SVG的尺寸，再设置内联SVG的viewBox：

<svg id="svg-container" width="60px" height="30px"></svg>

<script>
  fetch('logo.svg')
    .then(res => res.text())
    .then(svgText => {
      const parser = new DOMParser();
      const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
      const originalSvg = svgDoc.querySelector('svg');
      const width = originalSvg.getAttribute('width') || originalSvg.viewBox.baseVal.width;
      const height = originalSvg.getAttribute('height') || originalSvg.viewBox.baseVal.height;
      
      const container = document.getElementById('svg-container');
      container.setAttribute('viewBox', `0 0 ${width} ${height}`);
      
      const useTag = document.createElementNS('http://www.w3.org/2000/svg', 'use');
      useTag.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'logo.svg');
      container.appendChild(useTag);
    });
</script>

方法3：使用CSS transform缩放 #

通过transform: scale()直接缩放img元素，配合transform-origin调整缩放原点，再用容器的overflow: hidden裁剪多余部分：

<div style="width: 60px; height: 30px; overflow: hidden;">
  <img src="logo.svg" style="transform: scale(0.5); transform-origin: top left;">
</div>

• 缩放比例=目标尺寸/原始尺寸（比如原始宽120px，目标60px，缩放比例设为0.5）
• transform-origin: top left：确保缩放后元素左上角对齐容器，避免偏移

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