SVG是一种矢量图，放大缩小皆不会失真。这种矢量图，可以用作标签或者用作一些具有交互效果的图片。我们使用SVG作为网页的一部分的时候，有如下几种方法：
一，使用embed标签
<embed src="SVG路径" type="image/svg+xml"/>
二，使用object标签
<object data="SVG路径" type="image/svg+xml"/>
三，使用iframe
<iframe src="SVG路径"></iframe>
四，直接用img引入svg
<img src="SVG路径"/>
五，把svg当作背景，即：用background引入svg
background-image: url("SVG路径");
六，直接嵌入网页
<body>
<div>
<svg>....</svg>
</div>
</body>
七，使用Jquery的load()或AJAX加载进来
比如我们要将svg文件装载到<div>中
<div ID="div"></div>
1，jquery的load：
用jquery的load的话就要在Js里写
$("#div").load("xxx.svg");
2，AJAX加载就要在Js里这样写：
$.AJAX({
url:"xxx.svg",
type:"get",
dataType:"HTML",
success:function(data){
$("#div").HTML(data);
}
});
八，在第四种方法的基础上，为了兼容低版本的浏览器，加入一个svg.Js
1，首先用script标签引入svg.Js：
<script type="text/JavaScript" src="svg.Js"></script>
2，其次直接在div中嵌入svg标签：
<body>
<div>
<svg>....</svg>
</div>
</body>
这样能有效兼容低版本IE，从IE9开始。
以上是我的查找总结，如果有什么不对的地方，请大家评论，我会及时查看修改。
总结以上是内存溢出为你收集整理的SVG嵌入网页的几种方式全部内容，希望文章能够帮你解决SVG嵌入网页的几种方式所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）