最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
html网页引入svg图片的方法
时间:2022-09-13 编辑:坚强 来源:一聚教程网
今天小编为大家带来了html网页引入svg图片的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴赶紧来看看吧!
web应用开发使用svg图片,总结了下,可以有如下4种方式:
1. 直接插入页面。
2. img标签引入。
3. css引入。
4. object标签引入。
1. 直接插入页面
在html页面,可以直接使用svg标签。
运行效果:
2. img标签引入
除了在网页里直接写svg标签,也可以通过img引入,就像引入jpeg、png图片一样。
1)新建svg图片
那么我们就要先新建一个svg图片文件,我们把上面直接写在网页里的svg拿来用:
这边内容有两点不一样:
1. 需要声明命名空间 xmlns 这个属性,命名空间可以本文尾部列出的参考资料。
2. 移除了原先写在 svg 标签上的样式,style="border: 1px solid steelblue"。
把内容保存到test.svg文件,这个就是一张图片文件了,可以尝试在浏览器打开看看。
2)使用img标签引入
假设test.svg和网页文件在同一个目录下:
和引入jpeg、png类似,直接src属性设置图片路径即可,另外我们把原先在svg的样式移到了img标签这边。
运行效果和上面是一样的:
现在网上有很多svg做的图片,可以参考:https://www.iconfont.cn,一个不错的icon图标网站。
3. css引入
css引入就是把图片当成背景图引入:
4. object引入
和img引入类似,需要一个svg文件,然后用属性data引入:
运行效果和上面类似,就不再贴图。
以上就是关于html网页引入svg图片的方法了,感兴趣的小伙伴欢迎点击观看。
-
上一个: Html5获取用户当前位置的方法
-
下一个: html中相对位置和绝对位置的使用介绍
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31