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


Posted in HTML / CSS onAugust 05, 2022

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

1. 直接插入页面。
2. img标签引入。
3. css引入。
4. object标签引入。

1. 直接插入页面

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 一个svg图片 -->
		<svg width="200" height="150" style="border: 1px solid steelblue">
			<!-- 里面有一个矩形 -->
			<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
		</svg>
	</body>
</html>

运行效果:

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

2. img标签引入

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

1)新建svg图片

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

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

这边内容有两点不一样:

1. 需要声明命名空间 xmlns 这个属性,命名空间可以本文尾部列出的参考资料。
2. 移除了原先写在 svg 标签上的样式,style="border: 1px solid steelblue"。

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

2)使用img标签引入

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

<img src="test.svg" style="border: 1px solid steelblue" />

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

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

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

现在网上有很多svg做的图片,可以参考:https://www.iconfont.cn,一个不错的icon图标网站。

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

3. css引入

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

<style type="text/css">
	.svg {
		width: 200px;
		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图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 #HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 #HTML / CSS
css中:last-child不生效的解决方法
Aug 05 #HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 #HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 #HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 #HTML / CSS
纯CSS打字动画的实现示例
Aug 05 #HTML / CSS
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Python高级用法总结
2018/05/26 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
django创建超级用户过程解析
2019/09/18 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
关于赌博的检讨书
2014/01/08 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
上课打牌的检讨书
2014/02/15 职场文书
运动员获奖感言
2014/08/15 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
课外活动总结
2015/02/04 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python