SVG 在前端的7种使用方法,你还知道哪几种?
技术一直在演变,在网页中使用 SVG
的方法也层出不穷。每个时期都有对应的最优解。
所以我打算把我知道的 7种 SVG
的使用方法列举出来,有备无患~
如果你还知道其他方法,可以在评论区补充~
1. 在浏览器直接打开
<?xml version="1.0" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>雷猴</title>
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
复制代码
xml
是浏览器能读取的格式,但如果希望 svg
能在浏览器中渲染出来,需要使用 xmlns
声明渲染规则。
所以必须使用 xmlns="http://www.w3.org/2000/svg"
。
2. 内嵌到 HTML 中(推荐⭐⭐⭐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg demo</title>
</head>
<body>
<div>
<!-- 内嵌到 HTML 中 -->
<svg width="100%" height="100%" version="1.1">
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
</div>
</body>
</html>
复制代码
可以看到上面的代码中,<svg>
标签并没有使用 xmlns="http://www.w3.org/2000/svg"
声明命名空间,这是因为 HTML 5
文档使用 <!DOCTYPE html>
标记,它允许跳过 SVG
命名空间声明,HTML
解析器会自动识别 SVG
元素和它的子元素,除了 <foreignObject>
元素的子元素。
在写本文时,将 SVG
内嵌到 HTML
中 的做法是最常见的,也是比较推荐的方式之一。
做特效时,这种使用方式也是比较轻松的。
3. CSS 背景图(推荐⭐)
<style>
.svg_bg_img {
width: 100px;
height: 100px;
background: url('./case1.svg') no-repeat;
background-size: 100px 100px;
}
</style>
<div class="svg_bg_img"></div>
复制代码
SVG
也是一种图片格式,所以按理说是能当做背景图来使用的。
一试,果然可以~
4. 使用 img 标签引入(推荐⭐)
<img src="./case1.svg" width="100" height="100">
复制代码
既然 SVG
可以在 CSS
中当背景图使用,那也可以在 <img>
标签里使用咯~
5. 使用 iframe 标签引入(不推荐❌)
<iframe
src="./case1.svg"
width="100"
height="100"
></iframe>
复制代码
iframe
可以在网页里再嵌套一个网页,既然 SVG
可以直接在浏览器打开,那使用 <iframe>
引用 SVG
同样也是可以的。
需要注意的是,<iframe>
默认是有个边框样式的,如果你使用这种方式引入 SVG
可能还需要自己手动调节一下样式。
6. 使用 embed 标签引入(不推荐❌)
<embed
src="./case1.svg"
width="100"
height="100"
/>
复制代码
<embed>
标签定义了一个容器,用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。
<embed>
标签已经被标准采用了。但它不能包含任何子内容,因此如果嵌入失败就没有备用选项了。所以现阶段来看,我不太推荐使用 embed
的方式引入 SVG
。
7. 使用 object 标签引入(不推荐❌)
<object
data="./case1.svg"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install"
></object>
复制代码
<object>
是通过 data
属性引入资源的。它可以用于嵌入图像,类似 <img>
,也可以用于嵌入独立的 HTML
文档,类似 <iframe>
。
使用 <object>
嵌入 SVG
可以让那些不能直接显示 SVG
但又有 SVG
插件的老旧浏览器展示 SVG
。
需要注意的是,在某些现代浏览器中,type
和 codebase
是可以不写的。
type
用来声明当前引入的资源是属于什么类型。
总结
在写本时,我推荐使用 内嵌到 HTML
的方式来做日常开发。
其他方式按照你实际需求去使用即可。
最后的 embed
和 object
这两种方式可以当做备用方案去使用。
- Hadoop和Zookeeper安装过程中出现的问题解决
- Ryu和OpenStack集成
- react+redux+webpack教程2
- C/C++ Development using Visual Studio Code, CMake and LLDB
- TensorFlow-10-基于 LSTM 建立一个语言模型
- jquery及原生javascript对jsonp解决跨域问题实例详解
- css负边距之详解
- Python进阶教程(三)
- Python进阶教程(二)
- Python进阶教程(一)
- TensorFlow-11-策略网络
- 对比requirejs更好的理解seajs
- 深入浅出Logistic Regression之二分类
- 如何自动生成文本摘要
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SpringBoot整合SpringBatch实用简例
- 解决JPA懒加载典型的N+1问题-注解@NamedEntityGraph
- 基于Shiro,JWT实现微信小程序登录完整例子
- Spring Cloud Eureka 总结
- Spring Cloud Feign 总结
- 掘金15W沸点简单分析(一)
- SpringBoot整合Shiro实现基于角色的权限访问控制(RBAC)系统简单设计从零搭建
- 基于AOP和ThreadLocal实现日志记录
- 搭建prometheus+grafana监控SpringBoot应用入门
- 掘金15W沸点简单分析(二)
- 老生常谈SpringAop日志收集与处理做的工具包
- 线程间通信wait---notify
- Ubuntu安装Oracle Java8
- CentOS7安装Git
- RocketMQ-环境搭建(单master模式-ubuntu版)