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的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 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
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
Python 递归函数详解及实例
2016/12/27 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
实践Vim配置python开发环境
2018/07/02 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
校本教研工作制度
2014/01/22 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
秋冬农业生产标语
2014/10/09 职场文书
暑期社会实践证明书
2014/11/17 职场文书
护士2015年终工作总结
2015/04/29 职场文书
调解协议书范本
2016/03/21 职场文书
人民币使用说明书
2019/04/17 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
PHP 时间处理类Carbon
2022/05/20 PHP