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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 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/03/27 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
django的分页器Paginator 从django中导入类
2019/07/25 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
班级活动策划书
2014/02/06 职场文书
大学信息公开实施方案
2014/03/09 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
银行内勤岗位职责
2014/04/09 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
小学主题班会教案
2015/08/17 职场文书