SVG 教程
1. SVG 教程 2. SVG 简介 3. SVG 实例 4. SVG 在 HTML 中 5. SVG 矩形 6. SVG 圆形 7. SVG 椭圆 8. SVG 直线 9. SVG 多边形 10. SVG 曲线 11. SVG 路径 12. SVG 文本 13. SVG Stroke 属性 14. SVG 滤镜 15. SVG 模糊效果 – 高斯模糊 16. SVG 阴影 17. SVG 渐变 – 线性 18. SVG 渐变- 放射性 19. SVG 参考手册

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>

结果:


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

55面试教程网 »

链接到SVG文件

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

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

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

结果:

查看 SVG 文件