可视化系列讲解：SVG创建及使用方式
文章目录
- 一、SVG是什么？
- 二、SVG 优点与缺点
-
-
- 2.1 优点
- 2.2 缺点
-
- 三、SVG的应用场景
- 四、SVG 和 Canvas的区别
- 五、SVG的创建方式
-
-
- 方式一
- 方式二
- 方式三
- 方式四
-
- 六、SVG的使用方式
-
-
- 方式一
- 方式二
- 方式三
- 方式四
- 方式五
- 方式六
-
一、SVG是什么？
◼ SVG 全称为（Scalable Vector Graphics），即可缩放矢量图形。（矢量定义：既有大小又有方向的量。在物理学中称作矢
量，如一个带箭头线段：长度表示大小，箭头表示方向；在数学中称作向量。在计算机中，矢量图可无限放大而不变形）
◼ SVG 是一种基于XML格式的矢量图，主要用于定义二维图形，支持交互和动画
◼ SVG 规范是万维网联盟(W3C) 自 1998 年以来开发的标准。
◼ SVG 图像可在不损失质量的情况下按比例缩放，并支持压缩。
◼ 基于XML的SVG可轻松的用文本编辑器或矢量图形编辑器创建和编辑，并可以直接在浏览器显示。
二、SVG 优点与缺点
2.1 优点
◼ 扩展好：矢量图像在浏览器中放大缩小不会失真，可被许多设备和浏览器中使用。而光栅图像（PNG 、JPG）放大缩小会失真。
（矢量图像是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小是不会失真的。
光栅图像是由像素点构建的图像——微小的彩色方块，大量像素点可以形成高清图像，比如照片。图像像素越多，质量越高。）
◼ 灵活：SVG是W3C开发的标准，可结合其它的语言和技术一起使用，包括 CSS、JavaScript、 HTML 和 SMIL 。SVG图像可以
直接使用JS和CSS进行操作，使用时非常方便和灵活，因为SVG也是可集成到 DOM 中的。
◼ 可以动画：SVG 图像可以使用 JS 、 CSS 和 SMIL 进行动画处理。对于 Web 开发人员来说非常的友好。
◼ 轻量级：与其它格式相比，SVG 图像的尺寸非常小。根据图像的不同，PNG 图像质量可能是 SVG 图像的 50 倍。
◼ 可打印：SVG 图像可以以任何分辨率打印，而不会损失图像质量。
◼ 利于SEO：SVG 图像被搜索引擎索引。因此，SVG 图像非常适合 SEO（搜索引擎优化）目的。
◼ 可压缩：与其它图像格式一样，SVG 文件支持压缩。
◼ 易于编辑：只需一个文本编辑器就可以创建 SVG 图像。设计师通常会使用 Adobe Illustrator （AI）等矢量图形
2.2 缺点
◼ 不适和高清图片制作：SVG 格式非常适合用于徽标和图标（ICON）等 2D 图形，但不适用于高清图片，不适合进行像素级操作。SVG 的图像无法显示与标准图像格式一样多的细节，因为它们是使用点和路径而不是像素来渲染的。
◼ SVG 图像变得复杂时，加载会比较慢
◼ 不适用于 IE8 及更低版本的旧版浏览器：（这都淘汰了，可以忽略）
三、SVG的应用场景
◼ 适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。
◼ SVG 适合应用在需适配多种尺寸的屏幕上展示，因为SVG的扩展性更好。
◼ 当需要创建简单的动画时（SVG 可以与 JS 交互来制作线条动画、过渡和其他复杂的动画，SVG 可以与 CSS 动画交互，也可以使用自己内置的 SMIL 动画。）
◼ SVG 也非常适合制作各种图表（条形图、折线图、饼图、散点图等等），以及大屏可视化页面开发。
四、SVG 和 Canvas的区别
- 可扩展性：
◼ SVG 是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小不会失真
◼ Canvas 是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化（模糊）。
◼ SVG可以在任何分辨率下以高质量的打印。Canvas 不适合在任意分辨率下打印。 - 渲染能力：
◼ 当 SVG 很复杂时，它的渲染就会变得很慢，因为在很大程度上去使用 DOM 时，渲染会变得很慢。
◼ Canvas 提供了高性能的渲染和更快的图形处理能力，例如：适合制作H5小游戏
◼ 当图像中具有大量元素时，SVG 文件的大小会增长得更快（导致DOM变得复杂），而Canvas并不会增加太多。 - 灵活度：
◼ SVG 可以通过JavaScript 和 CSS 进行修改，用SVG来创建动画和制作特效非常方便。
◼ Canvas只能通过JavaScript进行修改，创建动画得一帧帧重绘。 - 使用场景：
◼ Canvas 主要用于游戏开发、绘制图形、复杂照片的合成，以及对图片进行像素级别的操作，如：取色器、复古照片
◼ SVG 非常适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。
五、SVG的创建方式
方式一
在一个单独的svg文件中绘制，svg文件可直接在浏览器预览或嵌入到HTML中使用（推荐）
// svg 1.0版本 创建一个.svg的文件
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
version="1.0"
baseProfile="full"
width="300"
height="150"
xmlns="http://www.w3.org/2000/svg"
style="border:1px solid pink"
>
<rect x="0" y="0" width="100" height="50"></rect>
</svg>
// svg 2.0版本 创建一个.svg的文件
<?xml version="1.0" standalone="no" ?>
<svg
width="300"
height="150"
xmlns="http://www.w3.org/2000/svg"
style="border:1px solid pink"
>
<rect x="0" y="0" width="100" height="50"></rect>
</svg>
方式二
使用AI（Adobe IIIustractor）矢量绘图工具来绘制矢量图，并导出为svg文件（推荐）
方式三
直接在HTML文件中使用svg元素来绘制（推荐）
<!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>Document</title>
</head>
<body>
<!-- 1.0版本 -->
<svg
version="1.0"
baseProfile="full"
width="100"
height="100"
>
<rect x="0" y="0" width="100" height="100"></rect>
</svg>
<!-- 2.0版本 -->
<svg
width="100"
height="100"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0" y="0" width="100" height="100"></rect>
</svg>
<!-- 2.0版本简写 -->
<!-- 不写宽高 默认w300 h150 -->
<svg>
<rect x="0" y="0" width="100" height="100"></rect>
</svg>
</body>
</html>
方式四
直接使用JavaScript代码来生成svg矢量图。
<!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>Document</title>
</head>
<body>
<script>
// 1.命名空间(使用js创建这个必须写)
const xmlns = "http://www.w3.org/2000/svg";
// 2.创建SVG元素
let svgEl = document.createElementNS(xmlns, "svg");
let rectEl = document.createElementNS(xmlns, "rect");
// 3.给SVG元素添加属性
svgEl.setAttributeNS(null, "version", "1.1");
svgEl.setAttributeNS(null, "width", 300);
svgEl.setAttributeNS(null, "height", 150);
svgEl.style.border = "1px solid pink";
rectEl.setAttributeNS(null, "width", 100);
rectEl.setAttributeNS(null, "height", 40);
// 4.把SVG元素插入到DOM中
svgEl.appendChild(rectEl);
document.body.appendChild(svgEl);
</script>
</body>
</html>
六、SVG的使用方式
方式一
<!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>Document</title>
</head>
<body>
<img src="你的svg文件地址">
</body>
</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>Document</title>
<style>
.box {
width: 300px;
height: 150px;
background-image: url(你的svg文件地址);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</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>Document</title>
</head>
<body>
<svg
width="300"
height="150"
style="background:pink"
>
<rect x="10" y="10" width="100" height="50"></rect>
</svg>
</body>
</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>Document</title>
</head>
<body>
<object data="你的svg文件地址" type="image/svg+xml"></object>
</body>
</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>Document</title>
</head>
<body>
<iframe src="你的svg文件地址"></iframe>
</body>
</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>Document</title>
</head>
<body>
<embed src="你的svg文件地址" type="image/svg+xml">
</body>
</html>