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 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 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
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
JavaScript实现简单音乐播放器
2020/04/17 Javascript
回顾Javascript React基础
2019/06/15 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
优秀毕业生找工作自荐信
2014/06/23 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
典型事迹材料范文
2014/12/29 职场文书
秦兵马俑导游词
2015/02/02 职场文书
应急管理工作总结2015
2015/05/04 职场文书
团日活动总结格式
2015/05/11 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
教你用python实现12306余票查询
2021/06/30 Python
Nginx限流和黑名单配置
2022/05/20 Servers