如何在HTML5中使用SVG

在HTML5中我们可以通过使用 标签内联SVG，使用HTML的 标签、 标签、 标签、 标签导入SVG图像，使用CSS background属性导入SVG图像。

SVG是一种矢量图形格式，可以随着Web页面的大小变化重新绘制以适应其尺寸，不会出现任何失真的情况；十分适合在响应式Web设计中使用。本篇文章就给大家具体介绍在HTML5中如何使用SVG，希望对你们有所帮助。【相关视频教程推荐： HTML5教程 】

使用HTML5 标签内联SVG

SVG是HTML 5草案规范的一部分，即 标签是HTML 5语言的一部分，可以是内联的。所有主要的浏览器品牌（IE9除外）现在都提供非常好的支持度。

注：

1、要使用 标签内联SVG，千万不能忘记在 标签元素内声明：xmlns="http://www.w3.org/2000/svg"。

2、这只能用于静态SVG的导入。

下面是一个简单的HTML5 SVG示例。

Salin selepas log masuk 效果图：

使用 标签导入SVG图像

注：使用 标签只能用于静态SVG图像的导入。

Salin selepas log masuk 效果图：

使用 标签导入SVG图像

Salin selepas log masuk 从技术上讲， 标签可用于许多元素，包括SVG文件，如果有不被识别为图像的元素，在图像搜索时就不可用。解决方法是使用 标记作为后备：

Salin selepas log masuk 使用 标签导入SVG图像

Salin selepas log masuk 不怎么建议使用 标签导入SVG图像，它不是HTML规范的一部分，但在主要用于实现Flash插件的所有浏览器上得到广泛支持。

使用 标签导入SVG图像

Salin selepas log masuk 标签导入SVG图像的方法也不是很建议使用，我们可以使用 标签，因为iframe难以维护，不会被搜索引擎索引，也不利于SEO（搜索引擎优化）。

使用CSS背景图像导入SVG图像

我们可以使用css background属性把SVG图像导入成背景图片

这相当于使用 标签，并且具有相同的优点和缺点。

#id { background-image: url(image.svg) no-repeat; } Salin selepas log masuk 效果图：

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。