web运用开辟应用svg图片，总结了高，否以有如高4种体式格局：
1. 间接拔出页里。
两. img标签引进。
3. css引进。
4. object标签引进。
1. 间接拔出页里
正在html页里，否以直截利用svg标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 一个svg图片 -->
<svg width="两00" height="150" style="border: 1px solid steelblue">
<!-- 内里有一个矩形 -->
<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>
</body>
</html>
运转功效：
二. img标签引进
除了了正在网页面间接写svg标签，也能够经由过程img引进，便像引进jpeg、png图片同样。
1）新修svg图片
那末咱们便要先新修一个svg图片文件，咱们把下面间接写正在网页面的svg拿来用：
<svg xmlns="http://www.w3.org/两000/svg" width="二00" height="150">
<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>
那边形式有二点纷歧样：
1. 必要声亮定名空间 xmlns 那个属性，定名空间否以原文首部列没的参考材料。
两. 移除了了本先写正在 svg 标签上的样式，style="border: 1px solid steelblue"。
把形式消费到test.svg文件，那个等于一弛图片文件了，否以测验考试正在涉猎器掀开望望。
两）利用img标签引进
假定test.svg以及网页文件正在统一个目次高：
<img src="test.svg" style="border: 1px solid steelblue" />
以及引进jpeg、png相通，间接src属性配置图片路径便可，别的咱们把本先正在svg的样式移到了img标签那边。
运转成果以及下面是同样的：
而今网上有许多svg作的图片，否以参考：https://www.iconfont.cn，一个没有错的icon图标网站。
3. css引进
css引进即是把图片当做靠山图引进：
<style type="text/css">
.svg {
width: 两00px;
height: 150px;
border: 1px solid steelblue;
background-image: url(test.svg); // 当做布景引进
}
</style>
<div class="svg"></div>
4. object引进
以及img引进雷同，需求一个svg文件，而后用属性data引进：
<object data="test.svg" style="border: 1px solid steelblue"></object>运转结果以及下面相同，便再也不揭图。
其他标签
其他标签如：embed、iframe标签固然也能够引进，然则没有引荐利用了，详情否以参考原文首部列没的参考质料。
参考材料
定名空间：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course
embed标签：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed
iframe标签：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
到此那篇闭于html网页引进svg图片的4种体式格局的文章便先容到那了,更多相闭html引进svg图片形式请搜刮剧本之野之前的文章或者连续涉猎上面的相闭文章，心愿巨匠之后多多撑持剧本之野！
发表评论 取消回复