使用 Gulp 创建无压缩的 SVG 精灵答案

【问题标题】：Using Gulp to create an SVG sprite without compression使用 Gulp 创建无压缩的 SVG 精灵
【发布时间】：2016-06-24 22:37:33
【问题描述】：

我正在尝试在给定项目中的每个 SVG 上使用 this 插件。

我相信 svg 本身的默认压缩或重新格式化会导致问题。

例如，我有一个标准的三栏菜单图标：

&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt; &lt;svg width="200px" height="180px" viewBox="0 0 200 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt; &lt;g id="Artboard-1" fill="#D8D8D8"&gt; &lt;rect id="Rectangle-1" x="0" y="0" width="200" height="40"&gt;&lt;/rect&gt; &lt;rect id="Rectangle-1" x="0" y="70" width="200" height="40"&gt;&lt;/rect&gt; &lt;rect id="Rectangle-1" x="0" y="140" width="200" height="40"&gt;&lt;/rect&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt;

但一旦压缩：

<symbol id="menu" viewBox="0 0 200 180"> <g fill="#D8D8D8" fill-rule="evenodd"><path d="M0 0h200v40H0zM0 70h200v40H0zM0 140h200v40H0z"/></g> </symbol>

使我无法对不同的 rect 项目进行任何动画处理，而在它被移动到精灵之前。

有没有办法关闭压缩或重新格式化？

【问题讨论】：

标签： svg gulp sprite

【解决方案1】：

根据the documentation，应该可以通过

从转换过程中删除svgo

{
    shape : {
        transform           : []
    }
}

【讨论】：