# Svgo

本项目提供了 svg 压缩处理优化功能。基于 svgo (opens new window)实现。

npm run svgo

我们很多网上下载或者 Sketch 导出的 svg 会有很多冗余无用的信息，大大的增加了 svg 的尺寸，我们可以使用 svgo 对它进行优化。比如以下是一个 svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1583804634072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1210" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
    <defs>
        <style type="text/css"></style>
    </defs>
    <path d="M5.46769396 109.54511459L5.46769396 930.39361806 1011.3925387 930.39361806 1011.3925387 109.54511459 5.46769396 109.54511459 5.46769396 109.54511459zM382.68935524 637.23592211L382.68935524 461.33484658l251.48027943 0 0 175.90107553L382.68935524 637.23592211 382.68935524 637.23592211zM634.16963467 695.86795815l0 175.89362386L382.68935524 871.76158201 382.68935524 695.86795815 634.16963467 695.86795815 634.16963467 695.86795815zM634.16963467 226.80670359l0 175.89610815L382.68935524 402.70281053 382.68935524 226.80670359 634.16963467 226.80670359 634.16963467 226.80670359zM319.81493847 226.80670359l0 175.89610815L68.3359006 402.70281053 68.3359006 226.80670359 319.81493847 226.80670359 319.81493847 226.80670359zM68.3359006 461.33484658l251.48027942 0 0 175.90107553L68.3359006 637.23592211 68.3359006 461.33484658 68.3359006 461.33484658zM697.03784251 461.33484658l251.47779633 0 0 175.90107553L697.03784251 637.23592211 697.03784251 461.33484658 697.03784251 461.33484658zM697.03784251 402.70281053L697.03784251 226.80670359l251.47779633 0 0 175.89610815L697.03784251 402.70281053 697.03784251 402.70281053zM68.3359006 695.86795815l251.48027942 0 0 175.89362386L68.3359006 871.76158201 68.3359006 695.86795815 68.3359006 695.86795815zM697.03784251 871.76158201L697.03784251 695.86795815l251.47779633 0 0 175.89362386L697.03784251 871.76158201 697.03784251 871.76158201zM697.03784251 871.76158201" p-id="1211"></path>
</svg>

1
2
3
4
5
6
7
8

我们可以执行 npm run svgo

Done in 7 ms!
1.765 KiB - 67.7% = 0.569 KiB

1
2

无用的信息都被处理掉了。

<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <defs>
        <style/>
    </defs>
    <path d="M5.468 109.545v820.849h1005.925V109.545H5.468zm377.221 527.69v-175.9h251.48v175.9H382.69zm251.48 58.633v175.894H382.69V695.868h251.48zm0-469.061v175.896H382.69V226.807h251.48zm-314.354 0v175.896H68.335V226.807h251.48zM68.335 461.335h251.481v175.9H68.336v-175.9zm628.703 0h251.478v175.9H697.038v-175.9zm0-58.632V226.807h251.478v175.896H697.038zM68.336 695.868h251.48v175.894H68.336V695.868zm628.702 175.894V695.868h251.478v175.894H697.038zm0 0"/>
</svg>

1
2
3
4
5
6

更多详细的配置可以在 /scr/components/SvgIcon/svgo.yml 中进行配置。

← ScreenTable