我如何<embed /> svg并将其缩放为img

Question

我喜欢想要将图片与页面分开的图像。我可以拍摄1024x768图像并执行此操作

<img src="1024x768.jpg" width="400" height="300"/>

或者我可以这样做

<img src="1024x768.jpg" style="width:400px; height:300px"/>

并且图像将缩放而不会被裁剪。我如何对svg做同样的事情？注意：我不想将svg直接嵌入到页面中。这对于我的所有图像使用dataURL都是愚蠢的。我的艺术家编辑图像，其他人编辑html，所以我需要将它们分开。

<embed src="somefile.svg" width="400" height="300"></embed>

不缩放svg，它只是作物。 CSS宽度/高度也不起作用。有没有办法像图像那样做？

Answer 1

好的，显然你可以在img标签中使用svg

<img src="somefile.svg" width="200"/>

And it works in IE9+, FF4+, Chrome4+, Safari4+, Opera 9.

Answer 2

我遇到了同样的问题 - 在IE中，而不是Chrome。我发现如果svg文件内部在svg标记上有一个viewBox属性，则会发生缩放（而不是裁剪）。