如何从XML字符串缩放SVG图片？实现自由拉伸压缩的正确方法

你之前用正则替换width/height的方式存在明显局限：正则无法覆盖所有SVG的属性写法（比如单引号、无引号、CSS内联样式），且默认的SVG比例保持规则会限制自由拉伸。以下是可靠的实现方案：

核心思路 #

SVG的尺寸控制依赖三个关键属性：

• viewBox：定义SVG内部的坐标系统（相当于画布的原始尺寸）
• width/height：定义SVG的显示尺寸
• preserveAspectRatio：控制是否保持原始比例，设为none即可实现自由拉伸

具体实现（浏览器环境） #

1. 解析SVG字符串为DOM元素
   用浏览器原生的DOMParser解析字符串，避免正则的局限性：

   const parser = new DOMParser();
   const svgDoc = parser.parseFromString(svgStr, 'image/svg+xml');
   const svg = svgDoc.querySelector('svg');
   

2. 确保viewBox存在
   如果SVG没有viewBox，先基于固有宽高设置它，这是自由拉伸的前提：

   // 获取SVG的固有宽高（优先级：属性 > viewBox > 默认值）
   const origWidth = svg.getAttribute('width') || svg.viewBox.baseVal.width || 200;
   const origHeight = svg.getAttribute('height') || svg.viewBox.baseVal.height || 200;
   
   if (!svg.hasAttribute('viewBox')) {
     svg.setAttribute('viewBox', `0 0 ${origWidth} ${origHeight}`);
   }
   

3. 开启自由拉伸并设置目标尺寸
   修改preserveAspectRatio为none，关闭比例保持，再设置目标宽高：

   // 关闭比例约束，允许自由拉伸
   svg.setAttribute('preserveAspectRatio', 'none');
   
   // 设置自定义宽高
   svg.setAttribute('width', targetWidth);
   svg.setAttribute('height', targetHeight);
   

4. 将修改后的DOM转回字符串
   用XMLSerializer序列化修改后的SVG：

   const serializer = new XMLSerializer();
   const modifiedSvgStr = serializer.serializeToString(svgDoc);
   

Node.js环境适配 #

Node.js没有原生的DOMParser，需要使用第三方库xmldom来处理：

npm install xmldom

代码示例：

const { DOMParser, XMLSerializer } = require('xmldom');

// 解析、修改、序列化逻辑和浏览器环境一致
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgStr, 'image/svg+xml');
const svg = svgDoc.querySelector('svg');

// ... 中间步骤和浏览器版相同 ...

const serializer = new XMLSerializer();
const modifiedSvgStr = serializer.serializeToString(svgDoc);

额外注意事项 #

• 如果SVG用内联样式设置宽高（如style="width: 100px;"），需要修改style属性而非width/height属性：

  svg.style.width = `${targetWidth}px`;
  svg.style.height = `${targetHeight}px`;
  

• 部分SVG可能通过<style>标签定义全局样式，此时需要确保样式优先级不会覆盖你设置的宽高。

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