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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
python调用动态链接库的基本过程详解
2019/06/19 Python
python实现QQ批量登录功能
2019/06/19 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python Gitlab Api 使用方法
2019/08/28 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
企业出纳岗位职责
2014/03/12 职场文书
励志演讲稿300字
2014/08/21 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
处级干部考察材料
2014/12/24 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
python入门之算法学习
2021/04/22 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫