如何在您的网页上放置SVG图形

SVG或可缩放矢量图形让您绘制更复杂的图像并将它们呈现在网页上。 但是你不能简单地把SVG标签放到你的HTML中。 他们不会出现，你的网页将无效。 相反，你必须使用三种方法之一。

使用对象标签嵌入SVG

HTML标记将在您的网页中嵌入SVG图形。 您使用数据属性编写对象标记以定义要打开的SVG文件。 您还应该包含宽度和高度属性以定义SVG图像的宽度和高度（以像素为单位）。

为了实现跨浏览器兼容性，您应该包含type属性，该属性应为：

类型= “图像/ SVG + xml” 的

以及不支持它的浏览器的代码库（Internet Explorer 8及更低版本）。 您的代码库将指向不支持SVG的浏览器的SVG插件。 最常用的插件来自Adobe，网址为http://www.adobe.com/svg/viewer/install/。 但是，这个插件不再受Adobe支持。 另一种选择是来自Savarese Software Research的Ssrc SVG插件，网址为http://www.savarese.com/software/svgplugin/。

你的对象看起来像这样：

使用SVG对象的技巧

  • 确保宽度和高度至少与您嵌入的图像一样大。 否则，您的图像可能会被裁剪。
  • 如果您没有包含正确的内容类型（type =“image / svg + xml”），那么您的SVG可能无法正确显示，因此我不建议将其删除。
  • 对于不显示SVG文件的浏览器，您可以在对象标记内包含回退信息。
  • 您还可以在参数中设置SVG的来源和内容类型。 这在IE 6和7中可能会更好：
classid =“CLSID：1339B54C-3453-11D2-93B9-000000000000”width =“110”height =“60”codebase =“http://www.savarese.com/software/svgplugin/”>

请注意，这需要一个classid来使其工作。

在对象标记示例中查看SVG。

嵌入带嵌入标签的SVG

包含SVG的另一个选项是使用标签。 您可以使用与对象标记几乎相同的属性，包括宽度<，高度，类型和代码库>。 唯一的区别是，您将SVG文档URL放在src属性中，而不是数据。

你的嵌入看起来像这样：

src =“http://your-domain.here/z-circle.svg”width =“210”height =“210”type =“image / svg + xml”codebase =“http://www.adobe.com / svg / viewer / install“/>

使用嵌入SVG的技巧

  • 嵌入标记无效HTML4，但它是有效的HTML5，因此如果您在HTML4页面中使用它，则应该记住您的页面不会进行验证。
  • 在src属性中使用完全禁用的域名以获得最佳兼容性。
  • 还有一些报告称，将Adobe插件与embed标签一起使用会使Mozilla版本1.0崩溃到1.4。

在嵌入标记示例中查看SVG。

使用iframe来包含SVG

Iframes是在您的网页上添加SVG图像的另一种简单方法。 它只需要三个属性：像往常一样宽和高，src指向SVG文件的位置。

你的iframe看起来像这样：