这里有一个简单的方法:

类型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相同的事情。

调整currentScale属性在IE中工作(我用IE 11测试)，但在Chrome中不工作。

另一种简单的方法是

transform: scale(1.5);

你会想这样做一个转换:

使用JavaScript:

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

用CSS:

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

将您的SVG页面包装在Group标签中，并将其定位为操纵整个页面:

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

注:Scale 1.0为100%

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

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

要指定SVG图像内的坐标而不受图像缩放大小的影响，可以使用SVG元素上的viewBox属性定义图像在图像坐标系统中的边界框，并使用width和height属性定义相对于包含页面的宽度或高度。

例如，如果你有以下情况:

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

它将呈现为一个10px * 20px的三角形:

现在，如果你只设置宽度和高度，这将改变SVG元素的大小，但不会缩放三角形:

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

如果您设置了视图框，则会导致它转换图像，以便将给定的框(在图像的坐标系统中)按比例放大以适应给定的宽度和高度(在页面的坐标系统中)。例如，要将三角形放大到100px * 50px:

<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 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 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 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>

(注意，虽然在我的例子中，我使用适用于HTML嵌入的语法，但在StackOverflow中，我将示例作为图像包含在另一个SVG中，因此我需要使用有效的XML语法)