Webpack实战-加载SVG

综合技术 2017-12-26

SVG 作为矢量图的一种标准格式,已经得到了各大浏览器的支持,它也成为了 Web 中矢量图的代名词。 在网页中采用 SVG 代替位图有如下好处:

  1. SVG 相对于位图更清晰,在任意缩放的情况下后不会破坏图形的清晰度,SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题。
  2. 在图形线条比较简单的情况下,SVG 文件的大小要小于位图,在扁平化 UI 流行的今天,多数情况下 SVG 会更小。
  3. 图形相同的 SVG 比对应的高清图有更好的渲染性能。
  4. SVG 采用和 HTML 一致的 XML 语法描述,灵活性很高。

画图工具能导出一个个 .svg 文件,SVG 的导入方法和图片类似,既可以像下面这样在 CSS 中直接使用:

body {
  background-image: url(./svgs/activity.svg);
}

也可以在 HTML 中使用:

也就是说可以直接把 SVG 文件当成一张图片来使用,方法和使用图片时完全一样。 所以在3-19 加载图片 中介绍的两种方法 使用 file-loader使用 url-loader 对 SVG 来说同样有效,只需要把 Loader test 配置中的文件后缀改成 .svg ,代码如下:

module.exports = {
  module: {
    rules: [
      {
        test: /.svg/,
        use: ['file-loader']
      }
    ]
  },
};

由于 SVG 是文本格式的文件,除了以上两种方法外还有其它方法,下面来一一说明。

使用 raw-loader

raw-loader 可以把文本文件的内容读取出来,注入到 JavaScript 或 CSS 中去。

例如在 JavaScript 中这样写:

import svgContent from './svgs/alert.svg';

经过 raw-loader 处理后输出的代码如下:

module.exports = "<svg xmlns="http://www.w3.org/2000/svg"... " // 末尾省略 SVG 内容 

也就是说 svgContent 的内容就等于字符串形式的 SVG,由于 SVG 本身就是 HTML 元素,在获取到 SVG 内容后,可以直接通过以下代码将 SVG 插入到网页中:

window.document.getElementById('app').innerHTML = svgContent;

使用 raw-loader 时相关的 Webpack 配置如下:

module.exports = {
  module: {
    rules: [
      {
        test: /.svg$/,
        use: ['raw-loader']
      }
    ]
  }
};

由于 raw-loader 会直接返回 SVG 的文本内容,并且无法通过 CSS 去展示 SVG 的文本内容,因此采用本方法后无法在 CSS 中导入 SVG。 也就是说在 CSS 中不可以出现 background-image: url(./svgs/activity.svg) 这样的代码,因为 background-image: url(...) 是不合法的。

本实例提供项目完整代码

使用 svg-inline-loader

svg-inline-loader 和上面提到的 raw-loader 非常相似, 不同在于 svg-inline-loader 会分析 SVG 的内容,去除其中不必要的部分代码,以减少 SVG 的文件大小。

在使用画图工具如 Adobe Illustrator、Sketch 制作 SVG 后,在导出时这些工具会生成对网页运行来说不必要的代码。 举个例子,以下是 Sketch 导出的 SVG 的代码:

  

被 svg-inline-loader 处理后会精简成如下:

也就是说 svg-inline-loader 增加了对 SVG 的压缩功能。

使用 svg-inline-loader 时相关的 Webpack 配置如下:

module.exports = {
  module: {
    rules: [
      {
        test: /.svg$/,
        use: ['svg-inline-loader']
      }
    ]
  }
};

本实例提供项目完整代码


《深入浅出Webpack》全书在线阅读链接

阅读原文

您可能感兴趣的

重新回顾 Webpack, Babel 和 React 开始之前 在书写文章之前,我假设大家已经有了 JavaScript , Node 包管理工具 , Linux 终端操作 这些基本技能,接下来,我将一步一步从头指引大家从头搭建一个 React 项目 最终实现的效果 我们将使用 Webpack 和 Babel 搭建一个 ...
babel之配置文件.babelrc入门详解 官方解释,是下一代JavaScript 语法的编译器。 既然是下一代Javascript的标准,浏览器因版本的不同对此会有兼容性问题,JavaScript的新的方法都不能使用,但是目前我们在项目开发一直提倡使用最新的语法糖编写,不但能减少代码量,而且async,await等新特性还解决了回调的编...
移动spa商城优化记(一)—首屏优化篇... 背景 随着公司业务的不断壮大,最近老是有用户反应公司APP内的商城打开比较慢,这可不行啊,慢了容易流失用户,流失用户减少公司业绩,公司业绩少我的年终奖就少…………,所以为了公司,也为了自己,开始优化之路。 商城系统是去年开发的,是一个基于vue2.0的spa项目,最好的优化思路当然是与原生移...
How I construct a pen on CodePen Why I love coding out my ideas Many of the pens I construct here on CodePen comes out of an idea where I want to see the effect of playing around wi...
Getting Started with Data Visualization — Build Yo... Hey everyone! Here’s a codepen of what we’re going to learn how to build in the next 15 minutes: Boilerplate Code You can either use the codep...