SVG 在 HTML 页面

AI悦创原创
  • svg
  • web
  • 前端
  • svg
  • web
  • 前端
大约 2 分钟

SVG 文件可通过以下标签嵌入 HTML 文档:<embed><object> 或者 <iframe>

SVG 的代码可以直接嵌入到 HTML 页面中,或您可以直接链接到 SVG 文件。

使用 <embed> 标签

<embed> :

  • 优势:所有主要浏览器都支持,并允许使用脚本
  • 缺点:不推荐在 HTML4 和 XHTML 中使用(但在 HTML5 允许)

语法:

<embed src="circle1.svg" type="image/svg+xml" />

使用 <object> 标签

<object>:

  • 优势:所有主要浏览器都支持,并支持 HTML4,XHTML 和 HTML5 标准
  • 缺点:不允许使用脚本。
<object data="circle1.svg" type="image/svg+xml"></object>

使用 <iframe> 标签

  • 优势:所有主要浏览器都支持,并允许使用脚本
  • 缺点:不推荐 在HTML4 和 XHTML 中使用(但在HTML5允许)

语法:

<iframe src="circle1.svg"></iframe>

直接在HTML嵌入SVG代码

在Firefox、Internet Explorer9、谷歌 Chrome 和 Safari 中,你可以直接在 HTML 嵌入 SVG 代码。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

链接到 SVG 文件

您还可以用 <a> 标签链接到一个 SVG 文件:链接到 SVG 文件

您还可以用 <a> 标签链接到一个 SVG 文件:

<a href="circle1.svg">查看 SVG 文件</a>

结果:查看 SVG 文件open in new window

欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发,Web,Linux」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQopen in new window

方法二:微信:Jiabcdefh

上次编辑于:
贡献者: AndersonHJB

你认为这篇文章怎么样?

  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度