这里有一个简单的方法:

类型1:大多数svg都有一个视图框，如下所示:

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

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

svg {
  height: 20px;
}

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

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

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

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

然后你可以做与类型1相同的事情。

这里有一个简单的方法:

类型1:大多数svg都有一个视图框，如下所示:

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

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

svg {
  height: 20px;
}

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

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

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

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

然后你可以做与类型1相同的事情。

改变SVG文件对我来说不是一个公平的解决方案，所以我使用了相对的CSS单元。

Vh, vw， %都很方便。我使用CSS的高度:2.4vh;为我的SVG图像设置动态大小。

经过大约48小时的研究，我最终这样做是为了得到比例缩放:

注意:这个示例是用React编写的。如果你不使用它，将驼峰大小写更改为连字符(即:将backgroundColor更改为background-color，并将style Object更改为字符串)。

<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

Min-x, min-y，宽度和高度

ie: viewbox="0 0 1000 1000"

Viewbox是一个重要的属性，因为它基本上告诉SVG绘制什么大小和位置。如果您使用CSS使SVG为1000x1000px，但您的视图框为2000x2000，那么您将看到SVG的左上角四分之一。

前两个数字min-x和min-y决定SVG是否应该在视图框内偏移。

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

viewbox="50 50 450 450"

前两个数字将使SVG向左移动50px，向上移动50px，后两个数字是视图框的大小:450x450 px。如果你的SVG是500x500，但它有一些额外的填充，你可以操纵这些数字在“视图框”中移动它。

此时，您的目标是改变其中一个数字，看看会发生什么。

你也可以完全省略视图框，但是你的里程数会根据你当时的其他设置而变化。根据我的经验，您会遇到保留纵横比的问题，因为视图框帮助定义纵横比。

保持纵横比

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%，所以它会装满它所在的容器。这可能是回答Stack Overflow问题的最大原因。

你可以改变它为任何你想要的像素值，但我建议使用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保持自己的纵横比，所以只需要在父容器上调整宽度的大小，它就会根据需要调整大小。

我们保持高度不变和/或将其设置为自动，我们用宽度控制大小的调整。我选择宽度是因为它通常更有意义，因为响应式设计。

下面是使用这些设置的图片:

如果你阅读了这个问题的每个答案，但仍然困惑或不太清楚自己需要什么，请点击这里的链接。我发现它非常有用:

https://css-tricks.com/scale-svg/

这是一篇内容丰富的文章，但是它分解了操作SVG的几乎所有可能的方法，包括使用或不使用CSS。我建议你在随意喝咖啡或其他饮品的时候读这本书。

另一种简单的方法是

transform: scale(1.5);

乱七八糟的&发现这个CSS似乎包含SVG在Chrome浏览器中，直到容器比图像大:

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

似乎也在FF + IE 11工作。