SVG 优化探索

在前端开发中或多或少都有用到 SVG，本篇文章就来总结下如何在前端项目中使用 SVG，每种使用方式的优缺点分析，以及对 SVG 的一些优化探索。

一、认识 SVG

三、SVG 使用方法

四、在 React + Webpack 项目中如何引入 SVG？

五、SVG 优化

一、认识 SVG

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。

这里简要说明下位图与矢量图的区别：位图是由像素点构成的，矢量图则是由一些形状元素构成。下图中放大位图可以看到点，而放大矢量图看到的仍然是形状。SVG 属于矢量图，因此理论上能够无限缩放，而不会导致马赛克。

简单的 SVG 样式：

SVG 的几大特点：

1）能使用 CSS/JS 进行控制。

2）与分辨率无关，在任何分辨率的设备上都能清晰地展示。就不需要为高清屏准备二倍图、三倍图了。

3）容易编辑

4）高度可压缩

来看下 SVG 格式与 JPG、GIF、PNG 图片格式在使用上的区别：

二、SVG 使用方法

使用 SVG 图片有多种方式，每种方式都有自己的优缺点，选择合适的方式就好。

1、在 Img 中引入

需要注意的是，使用这种方法在交互性上有很多限制，如不能使用 JS 来控制，不支持 CSS3 动画。

2、通过 CSS 中 Background-image 引入

使用背景图片方法需要注意的一点是，最好不要使用 base64 编码来格式化 SVG 图片，因为它在加载完前会阻塞其它资源的下载。使用这种方法在交互性上也有很多限制，如不能使用 JS 来控制，不支持 CSS3 动画。

3、通过 Iframe 引入

不确定这是不是还是一种好的使用方法。

4、通过 Embed 引入

大多数浏览器都支持，但最好还是不要使用这种方法。

5、通过 Object 引入

如果你想使用 JS 来进行交互控制，<object> 是 SVG 使用方法中很好的一个选择。 只需要把它放到 HTML 中就可以了。

6、将 SVG 元素直接加入到 HTML 中

把 SVG 直接插入到 HTML 中，可以节省 HTTP 请求，而且很方便使用 JS 来控制。但是这样，SVG 资源就不能被浏览器缓存。同时使用 JS 来操控 SVG 会发生重绘行为。

这几种使用方式的特点：

三、在 React + Webpack 项目中如何引入 SVG？

在 webpack 中有各种 loader 可以加载 SVG：

1、url-loader

官方文档：https://webpack.docschina.org/loaders/url-loader/

可以把 svg 当作普通 jpg、png 图片来使用。

安装：

webpack 配置：

在 React 组件中的引入方式：

经过 url-loader 处理后，test.svg 文件被处理为 "data:image/svg+xml;base64,PHN2ZyBpZ....." 这样的 base64 编码。