SVG的七种使用方法

一、前言

是什么

SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种基于XML语法的图像格式,与位图不同,它使用矢量路径描述图像,因此可以无限缩放而不失真。SVG已经成为Web开发的常用技术,尤其在数据可视化方面,它具有广泛的应用前景。

优势

1.任意缩放 2.文本独立 3.较小文件 4.超强显示效果 5.超级颜色控制 6.交互X和智能化

二、使用方法

1. 使用网络路径

xml 是浏览器能读取的格式,但如果希望 svg 能在浏览器中渲染出来,需要使用 xmlns 声明渲染规则。

所以必须使用 xmlns="http://www.w3.org/2000/svg"

xml 复制代码
<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>

2. 内嵌到HTML中

HTML5 文档使用 <!DOCTYPE html> 标记,它允许跳过 SVG 命名空间声明,HTML 解析器会自动识别 SVG 元素和它的子元素,除了 <foreignObject> 元素的子元素。

SVG 内嵌到 HTML 中的做法是最常见的,也是比较推荐的方式之一。

做特效时,这种使用方式也是比较轻松的。

xml 复制代码
<!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>

3. CSS背景图

SVG 也是一种图片格式,所以说是能当做背景图来使用的。

xml 复制代码
<div class="svg_bg_img"></div>
<style>
.svg_bg_img {
  width: 100px;
  height: 100px;
  background: url('./case1.svg') no-repeat;
  background-size: 100px 100px;
}
</style>

4. 使用 img 标签引入

SVG 可以在 CSS 中当背景图使用,也可以在 <img> 标签里使用

arduino 复制代码
<img src="./case1.svg" width="100" height="100">

5. 使用 iframe 标签引入

iframe 可以在网页里再嵌套一个网页,SVG 可以直接在浏览器打开,使用 <iframe> 引用 SVG 同样也是可以的。

需要注意的是,<iframe> 默认是有个边框样式的,如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。

ini 复制代码
<iframe
  src="./case1.svg"
  width="100"
  height="100"
></iframe>

6. 使用 embed 标签引入

<embed> 标签定义了一个容器,用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。

<embed> 标签已经被标准采用了。但它不能包含任何子内容,因此如果嵌入失败就没有备用选项了。

ini 复制代码
<embed
  src="./case1.svg"
  width="100"
  height="100"
/>

7. 使用 object 标签引入

<object> 是通过 data 属性引入资源的。它可以用于嵌入图像,类似 <img> ,也可以用于嵌入独立的 HTML 文档,类似 <iframe>

使用 <object> 嵌入 SVG 可以让那些不能直接显示 SVG 但又有 SVG 插件的老旧浏览器展示 SVG

需要注意的是,在某些现代浏览器中,typecodebase 是可以不写的。

type 用来声明当前引入的资源是属于什么类型。

ini 复制代码
<object
  data="./case1.svg"
  type="image/svg+xml"
  codebase="http://www.adobe.com/svg/viewer/install"
></object>
相关推荐
你脸上有BUG7 分钟前
Css实现悬浮对角线边框动效
前端·css·动画
烛阴22 分钟前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
crary,记忆31 分钟前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术36 分钟前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪1 小时前
JQ常规面试题
前端·javascript·面试
海上彼尚1 小时前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index2 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
Shimeng_19892 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
一只一只妖2 小时前
前端导出带有合并单元格的列表
前端
lilye663 小时前
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
前端·数据挖掘·数据分析