html中的svg,symbol和use标签

本文主要是介绍html中的svg,symbol和use标签，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

解析展示svg是现代浏览器默认实现的功能之一。

支持的浏览器:

Internet Explorer 9 及更高版本可以本机显示 SVG。在撰写本文时，Firefox、Chrome、Safari、Opera 和 Android 浏览器已经能够本地显示 SVG 一段时间了。对于 iOS 版 Safari、Opera 的迷你和移动浏览器以及 Android 版 Chrome 也是如此。

嵌入SVG到html文件有如下几种方式：

（You can embed an SVG image in an HTML file in several ways:）

Using an iframe element
Using an img element
Using the SVG image as background image.
Using an svg element
Using an embed element

<svg>

The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.svg 元素是一个容器，它定义了一个新的坐标系和视口。它用作 SVG 文档的最外层元素，但也可用于将 SVG 片段嵌入到 SVG 或 HTML 文档中。

outermost element of SVG documents：

embed an SVG fragment inside an SVG or HTML

该div元素在这里说明，svg 元件可以直接在HTML嵌入。但是，该svg元素不必嵌入到div元素中。

使用 SVG 元素，您可以将 SVG 直接嵌入到 HTML 页面中，而不是将 SVG 图像放在其自己的文件中。您可以通过向元素添加width和height 属性来设置 SVG 图像的宽度和高度svg。

您还可以为svg使用 CSS 设置元素及其子元素的样式，就像使用任何其他 HTML 一样。请注意，有时 SVG 元素的某些 CSS 属性的名称与 HTML 元素的名称不同。

无论您是否使用img,svg或embed元素来嵌入 SVG 图像，都可以使用width 和height属性设置图像的宽度和高度。如果 SVG 文件中的图像比这些数字宽或高，则只会显示 SVG 图像的一部分。确保设置的宽度和高度足够大以显示完整的 SVG 图像（或尽可能多的显示）。