本文介绍如何在RollupJS项目中打包SVG文件。

SVG简介

SVG是一种基于XML标记的矢量图形。和HTML一样，现代的浏览器都支持SVG，可以直接显示其内容。可以用Javascript来处理SVG，就像处理HTML一样，直接在DOM节点插入SVG的内容，这样就可以在页面上显示SVG图形。Javascript也可以直接操纵SVG的DOM，可以实现SVG动画。

SVG文件一般是保存在硬盘上的，以.svg结尾的，下面是一个例子（alien.svg)：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-alien" width="24" height="24" viewBox="0 0 24 24">
<path d="M12,3C16.97,3 21,6.58 21,11C21,15.42 15,21 12,21C9,21 3,15.42 3,11C3,6.58 7.03,3 12,3M10.31,10.93C9.29,9.29 7.47,8.58 6.25,9.34C5.03,10.1 4.87,12.05 5.89,13.69C6.92,15.33 8.74,16.04 9.96,15.28C11.18,14.5 11.33,12.57 10.31,10.93M13.69,10.93C12.67,12.57 12.82,14.5 14.04,15.28C15.26,16.04 17.08,15.33 18.11,13.69C19.13,12.05 18.97,10.1 17.75,9.34C16.53,8.58 14.71,9.29 13.69,10.93M12,17.75C10,17.75 9.5,17 9.5,17C9.5,17.03 10,19 12,19C14,19 14.5,17 14.5,17C14.5,17 14,17.75 12,17.75Z" /></svg>

上述的例子显示出来是下面这个样子：

所以一个SVG文件是一个标准的XML文件，包含很多XML文件范式相关的信息，比如头部的：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

这些其实对于浏览器来说并不是太需要。对于浏览器而言，没有上面头部的，inline的svg就可以了：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-alien" width="24" height="24" viewBox="0 0 24 24"><path d="M12,3C16.97,3 21,6.58 21,11C21,15.42 15,21 12,21C9,21 3,15.42 3,11C3,6.58 7.03,3 12,3M10.31,10.93C9.29,9.29 7.47,8.58 6.25,9.34C5.03,10.1 4.87,12.05 5.89,13.69C6.92,15.33 8.74,16.04 9.96,15.28C11.18,14.5 11.33,12.57 10.31,10.93M13.69,10.93C12.67,12.57 12.82,14.5 14.04,15.28C15.26,16.04 17.08,15.33 18.11,13.69C19.13,12.05 18.97,10.1 17.75,9.34C16.53,8.58 14.71,9.29 13.69,10.93M12,17.75C10,17.75 9.5,17 9.5,17C9.5,17.03 10,19 12,19C14,19 14.5,17 14.5,17C14.5,17 14,17.75 12,17.75Z" /></svg>

上述内容可以保存成一个Javascript的字符串，然后在使用的时候插入DOM。

RollupJS打包SVG

如果项目使用RollupJS来打包，那么我们可以通过RollupJS把硬盘上的SVG文件导入Javascript代码，变成字符串备用。下面介绍两个RollupJS的插件来帮助我们达到这个目的。

rollup-plugin-svgo

rollup-plugin-svgo使RollupJS在打包的时候将SVG导入变为Javascript字符串，并可以用svgo做一些预处理。

svgo是一款SVG优化工具，可以用来去除文件中你不想要的部分。在rollup.config.js中这样使用：

import svgo from 'rollup-plugin-svgo'

export default {
  plugins: [
    svgo(
      {
        plugins: [{
          removeViewBox: false
        }, {
          removeDoctype: true
        }, {
          removeXMLProcInst: true
        }, {
          removeDimensions: true
        }]
      }
    )
  ]
}

经过该SVGO配置处理过的SVG文件的冗余信息会被去除，变成inline svg。上述配置允许你在使用SVG的代码中：

import alien from "/path/to/alien.svg"

document.getElementById("spaceship").innerHTML = alien

前面介绍的是rollup-plugin-svgo，如果你的SVG文件直接就是inline svg格式的，那么可以直接使用rollup-plugin-string来将svg文件导入成Javascript字符串：

import { string } from 'rollup-plugin-string'

export default {
  plugins: [
    string({
      include: ['path/to/*.svg'],
    })
  ]
}