×
SVG 教程SVG 简介SVG 实例SVG 在 HTML 中SVG 矩形SVG 圆形SVG 椭圆SVG 直线SVG 多边形SVG 曲线SVG 路径SVG 文本SVG Stroke 属性SVG 滤镜SVG 模糊效果SVG 阴影SVG 渐变 - 线性SVG 渐变- 放射性SVG 实例SVG 参考手册SVG 在线编辑器 

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>

结果:


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

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

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

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

结果:

查看 SVG 文件

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)