要独立于图像的缩放大小指定SVG图像内的坐标，请使用SVG元素上的viewBox属性定义图像的边框在图像坐标系中的位置，并使用width和height属性定义相对于包含页面的宽度或高度。
例如，这将渲染为10px x x 20px的三角形：

svg {
  border: 1px solid blue;
}

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

现在，如果只设置宽度和高度，则会更改SVG元素的大小，但不会缩放三角形：
一个二个一个一个
如果您设置了视图框，它会转换图像，使给定的框（在图像的坐标系中）放大到适合给定的宽度和高度（在页面的坐标系中）。例如，要将三角形放大到100px x x 50px：

svg {
  border: 1px solid blue;
}

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

如果要将其放大到HTML视口的宽度：

svg {
  border: 1px solid blue;
}

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

注意默认情况下纵横比是保持不变的，所以如果你指定元素的宽度为100%，高度为50px，它实际上只会放大到50px的高度（除非你有一个非常窄的窗口）：

svg {
  border: 1px solid blue;
}

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
           points="0,10 20,10 10,0" />
</svg>

如果您确实希望它水平拉伸，请使用preserveAspectRatio=none禁用纵横比保留：

svg {
  border: 1px solid blue;
}

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

我最后这样做是为了得到比例缩放：

• 注意：这个例子是用React编写的。如果你不使用React，请将驼峰式大小写改回连字符（即：将backgroundColor更改为background-color，并将样式Object更改回String）。*

<div
  style={{
    backgroundColor: 'lightpink',
    resize: 'horizontal',
    overflow: 'hidden',
    width: '1000px',
    height: 'auto',
  }}
>
  <svg
    width="100%"
    viewBox="113 128 972 600"
    preserveAspectRatio="xMidYMid meet"
  >
    <g> ... </g>
  </svg>
</div>

下面是上面示例代码中发生的情况：

视图框

MDN：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
最小x、最小y、宽度和高度
即：视框=“0 0 1000 1000”
Viewbox是一个重要的属性，因为它基本上告诉SVG绘制的大小和位置。如果你使用CSS使SVG为1000 x1000 px，但你的Viewbox是2000 x2000，你会看到 * SVG的左上角。
前两个数字min-x和min-y确定SVG是否应该在视图框内偏移。

我的SVG需要向上/向下或向左/向右移动

仔细看看这个： windows 框=“50 50 450 450”
前两个数字表示SVG左移50 px和上移50 px，后两个数字表示视图框大小：450 x450 px。如果您的SVG是500 x500，但它有一些额外的填充，您可以操纵这些数字来在“视框”内移动它。
此时，您的目标是更改其中一个数字，看看会发生什么。
你也可以完全省略取景框，但你的里程数会根据你当时的其他设置而变化。根据我的经验，你会遇到保留宽高比的问题，因为取景框有助于定义宽高比。

保留纵横比

MDN：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
根据我的研究，有很多不同的纵横比设置，但默认的一个被称为xMidYMid meet。我把它放在我的明确提醒自己。xMidYMid meet使它根据中点X和Y成比例缩放。这意味着它保持居中的视框。

宽度

MDN：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
看看我上面的示例代码。注意我是如何只设置宽度而不设置高度的。我将它设置为100%，这样它就可以填充它所在的容器。这可能是回答堆栈溢出问题的最大贡献。
你可以把它改变成你想要的任何像素值，但是我建议像我一样使用100%把它放大到最大尺寸，然后通过父容器用CSS控制它。我建议这样做，因为你会得到“适当的”控制。你可以使用媒体查询，你可以控制大小，而不需要疯狂的JavaScript。

使用CSS缩放

再看一下上面的示例代码，注意我是如何拥有这些属性的：

resize: 'horizontal', // you can safely omit this
overflow: 'hidden',   // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',

这是附加的，但是它向您展示了如何允许用户在保持适当的纵横比的同时调整SVG的大小，因为SVG保持它自己的纵横比，所以您只需要在父容器上使width可调整大小，它就会根据需要调整大小。
我们保留高度和/或将其设置为自动，我们用宽度控制大小调整。我选择宽度是因为它通常更有意义，因为响应式设计。
以下是正在使用的这些设置的图像：

如果你阅读了这个问题的每一个解决方案，但仍然感到困惑或不太明白你需要什么，请点击这里的链接，我发现它非常有帮助：
https://css-tricks.com/scale-svg/
这是一篇篇幅很长的文章，但它几乎详细介绍了操作SVG的每一种可能的方法，无论是否使用CSS。我建议您在喝咖啡或选择液体时阅读这篇文章。

您需要执行如下变换：
使用JavaScript：

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

使用CSS：

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

将SVG页面 Package 在一个Group标记中，并将其作为操作整个页面的目标：

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

注：比例1.0为100%

在Chrome浏览器中，这个CSS似乎包含SVG，直到容器比图像大：

div.inserted-svg-logo svg { max-width:100%; }

似乎也在FF + IE 11中工作。

这里有一个简单的方法：

**类型1：**大多数SVG都有一个视图框，如下所示：

<svg viewBox="0 0 24 30" ...>

而且你可以很容易地在css中控制它们的大小：

svg {
  height: 20px;
}

**类型2：**如果svg有宽度和高度，但没有视口，如下所示：

<svg width="810" height="540">

然后你可以手动添加一个与其宽度和高度完全相同的视图框，如下所示：

<svg width="810" height="540" viewBox="0 0 810 540">

然后你可以做同样的类型1。

另一个简单的方法是

transform: scale(1.5);

更改SVG文件对我来说不是一个公平的解决方案，所以我使用了relative CSS units。
vh，vw，%非常方便。我使用了像height: 2.4vh;这样的CSS来设置SVG图像的动态大小。

如果要缩放SVG而不使用preserveAspectRatio属性。
这样，SVG将始终拉伸以填充width和height，并且这样做时，它将仅调整width或height的大小，如果需要，我们已经找了好几天了，所以考虑在这里共享它，以防其他人也在找它
您必须从<svg>中删除width和height，然后添加viewBox属性和preserveAspectRatio="none"
范例

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

调整currentScale属性在IE中有效（我用IE 11测试过），但在Chrome中无效。