目录
- 一、介绍：scalable vector graphic
- 二、基本使用
- 三、SVG 字体：自定义图标或者符号
- 四、SVG Sprite：自定义图标
- 五、动态 Fetch CDN SVG 图标
- 六、SVG 压缩
- 七、Svg vs Canvas
一、介绍：scalable vector graphic
SVG 是可缩放矢量图形（Scalable Vector Graphics）的缩写。它是一种用于描述二维矢量图形的 XML 格式的标记语言。与像素图形（如 JPEG、PNG 等）不同，像素图形是基于像素的位图，SVG 使用的是基于几何形状的描述，因此它可以无限放大而不失真，适用于各种尺寸的显示设备，从小到移动设备的屏幕到大到高分辨率的显示器，甚至打印品质的输出。
SVG 具有以下特点：
-
可缩放性：SVG 图像可以无限缩放而不会失真，因为它们是基于
数学描述的矢量图形。具体而言，SVG 图像是由几何形状（如直线、圆、曲线等）和其属性（如颜色、填充等）的数学描述组成的。这些描述不依赖于特定的分辨率或像素密度，而是以数学公式的形式保存。另外，SVG 中的图形元素是相对位置和比例保持一致的，无论图像的尺寸如何变化，图形元素之间的相对位置和比例都保持不变，因此在放大时不会出现失真。 -
文本可搜索和编辑：SVG 内的文本和图形元素是可编辑和可搜索的，这使得 SVG 图像非常适合用于包含文本和图形的
图表、地图等。 -
支持互动性和动画：SVG 支持添加交互式元素和动画效果，可以通过 CSS 或 JavaScript 进行控制。
-
跨浏览器兼容性：现代 Web 浏览器（如 Chrome、Firefox、Safari 等）都支持 SVG，使得 SVG 成为 Web 开发中常用的图形格式之一。
-
可压缩性和无损压缩：SVG 图像可以通过压缩算法进行压缩，以减小文件大小，从而加快加载速度。而且由于 SVG 使用文本文件格式（XML）来存储图形信息，它可以通过无损压缩算法（如 gzip）进行压缩。这意味着即使文件大小很小，也可以保留所有的细节和精度。
SVG 被广泛用于 Web 开发、数据可视化、图表绘制、图标设计等领域，因为它提供了一种灵活、清晰且可交互的图形表示方式。
二、基本使用
- 直接在 HTML 中嵌入 SVG 代码：
将 SVG 代码直接放入 HTML 文件中，这样可以轻松地对 SVG 元素应用 CSS 样式和 JavaScript 交互。
<!DOCTYPE html>
<html>
<head>
<style>
svg {
width: 100px;
height: 100px;
}
circle {
fill: green;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" />
</svg>
</body>
</html>
效果如下
- 使用
<img>标签
将 SVG 文件作为图像文件引用。这种方法的优点是可以像使用其他图像格式一样使用 SVG，简单医用。
然而，这种方法也有一些限制：
2.1 无法直接操作 SVG 内部元素：由于 SVG 被视为一种静态图像，因此无法直接通过 DOM 或 JavaScript 来操作 SVG 内部的元素。假设 SVG 文件包含一个圆形元素，你想要通过 JavaScript 动态地改变它的颜色。如果将 SVG 文件作为图像引用，你无法直接访问 SVG 元素来修改其属性，例如 document.querySelector('circle').setAttribute('fill', 'blue')。
2.2 不支持内联样式和脚本：在以 <img> 标签引入 SVG 文件时，SVG 图像不支持内联样式和脚本，这意味着无法通过 HTML 的 style 属性或者 SVG 内部的 <style> 元素来应用样式，也无法使用内联的 JavaScript 代码。假设 SVG 文件包含一个带有内联样式的矩形元素，并且带有一些 JavaScript 脚本来处理交互行为，示例如下：
<!-- SVG 文件内容（rectangle.svg） -->
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="blue" onclick="alert('Clicked!')" />
</svg>
在这个例子中，尽管 SVG 文件中有一个蓝色的矩形元素，并且带有一个点击事件，但是当它被引用为图像，就无法执行内联的 JavaScript，因此点击事件无法触发。
- 使用 CSS
background-image
与 <img> 标签用法限制一致。
<!DOCTYPE html>
<html>
<head>
<style>
.icon {
width: 100px;
height: 100px;
background-image: url('https://example.com/path/to/svg/image.svg');
background-size: cover;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
- 使用
<object>或<embed>标签：
这两个标签都允许将外部 SVG 文件嵌入到 HTML 文档中。使用这些方法，可以在一定程度上访问和操作 SVG 文档的 DOM，并且支持内联样式和脚本，但它们之间存在一些差异。
<!DOCTYPE html>
<html>
<body>
<obje