如何使用<embed>嵌入SVG并像图片一样进行缩放

Question

我只喜欢图片，我想把图片和页面分开。我可以使用1024x768的图片来实现这一点。

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

或者我可以这样做。

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

图片将被缩放而不是裁剪。我如何使用svg做同样的事情？注意：我不想直接将svg嵌入页面。这样做就像对所有图像使用dataURLs一样愚蠢。我的艺术家编辑图像，其他人编辑html，因此我需要它们分开。

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

不会缩放svg，只会裁剪。CSS的宽度/高度也无效。有类似图片的方法吗？

- gman

---

什么浏览器？HTML的哪个版本？怪异模式？ - Marcin

Answer 1

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

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

它在IE9+、FF4+、Chrome4+、Safari4+和Opera 9中都可以使用。

- gman

---

如果你想使用<embed>，则需要在<svg>元素上指定'viewBox'属性，以告诉它你希望它调整大小以填充你想要的区域。如果缺少'viewBox'属性，则<img>元素会自动构建该视口框。 - Erik Dahlström

在embed和img之间的区别还有一个要注意的地方是，前者允许在svg中嵌入的脚本运行，而图像标签则不会——至少目前在FF和Chrome中不会——这很可能是一种安全特性。 - Pebbl

Answer 2

我也遇到了同样的问题 - 在IE中而非Chrome中。我发现，如果SVG文件在svg标签内部具有viewBox属性，则会发生缩放（而非裁剪）。

- Thomas Munk