SVG 在 HTML 中

🌙
手机阅读
本文目录结构

SVG 在 HTML 页面


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>

使用 <object> 标签 <object>:

  • 优势:所有主要浏览器都支持,并支持HTML4,XHTML和HTML5标准
  • 缺点:不允许使用脚本。

语法:

<object data="circle1.svg" type="image/svg+xml"></object>

结果

使用 <iframe> 标签 <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文件

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

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

<a href="circle1.svg">View SVG file</a>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>