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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
Ajax PHP分页演示
2007/01/02 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
自制PHP框架之设计模式
2017/05/07 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python网络编程之五子棋游戏
2020/05/14 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
物流管理专业毕业生自荐信
2014/03/04 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
公司保密管理制度
2015/08/04 职场文书
《三国志》赏析
2019/08/27 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技