html网页引入svg图片的4种方式

web应用开发使用svg图片,总结了下,可以有如下4种方式:

1.直接插入页面。

2.img标签引入。

3.css引入。

4.object标签引入。

1.直接插入页面

在html页面,可以直接使用svg标签。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<!--一个svg图片-->
<svgwidth="200"height="150"style="border:1pxsolidsteelblue">
<!--里面有一个矩形-->
<rectx="10"y="10"width="100"height="60"fill="skyblue"></rect>
</svg>
</body>
</html>

2.img标签引入

除了在网页里直接写svg标签,也可以通过img引入,就像引入jpeg、png图片一样。

1)新建svg图片

那么我们就要先新建一个svg图片文件,我们把上面直接写在网页里的svg拿来用:

<svgxmlns="http://www.w3.org/2000/svg"width="200"height="150">
<rectx="10"y="10"width="100"height="60"fill="skyblue"></rect>
</svg>

这边内容有两点不一样:

1.需要声明命名空间xmlns这个属性,命名空间可以本文尾部列出的参考资料。

2.移除了原先写在svg标签上的样式,style="border:1pxsolidsteelblue"。

把内容保存到test.svg文件,这个就是一张图片文件了,可以尝试在浏览器打开看看。

2)使用img标签引入

假设test.svg和网页文件在同一个目录下:

<imgsrc="test.svg"style="border:1pxsolidsteelblue"/>

和引入jpeg、png类似,直接src属性设置图片路径即可,另外我们把原先在svg的样式移到了img标签这边。

运行效果和上面是一样的:

3.css引入

css引入就是把图片当成背景图引入:

<styletype="text/css">
.svg{
width:200px;
height:150px;
border:1pxsolidsteelblue;
background-image:url(test.svg);//当成背景引入
}
</style>
<divclass="svg"></div>

4.object引入

和img引入类似,需要一个svg文件,然后用属性data引入:

<objectdata="test.svg"style="border:1pxsolidsteelblue"></object>

运行效果和上面类似

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索