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实现全景图特效示例代码
Mar 26 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
css3应用示例:新增的选择器
Mar 16 HTML / CSS
HTML常用标签超详细整理
Mar 19 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP学习笔记之一
2011/01/17 PHP
php实现无限级分类
2014/12/24 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python解析含有重复key的json方法
2019/01/22 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
高一地理教学反思
2014/01/18 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
市场督导岗位职责
2015/04/10 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
volatile保证可见性及重排序方法
2022/08/05 Java/Android