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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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面向对象编程快速入门
2006/12/14 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
django中forms组件的使用与注意
2019/07/08 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
django下创建多个app并设置urls方法
2020/08/02 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
教师岗位职责
2013/11/17 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
就业协议书范本
2014/10/08 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
2016入党心得体会范文
2016/01/06 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
Python基础之数据结构详解
2021/04/28 Python
windows安装python超详细图文教程
2021/05/21 Python
MySQL的安装与配置详细教程
2021/06/26 MySQL