使用Gulp创建不压缩的SVG sprite [英] Using Gulp to create an SVG sprite without compression

问题描述

我试图在给定项目的每个SVG上使用这个插件。

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

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

<？xml version = 1.0encoding =UTF-8standalone =no？> < svg width =200pxheight =180pxviewBox =0 0 200 180version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http： //www.w3.org/1999/xlink\"> < g id =Page-1stroke =nonestroke-width =1fill =nonefill-rule =evenodd> < g id =Artboard-1fill =＃D8D8D8> < rect id =Rectangle-1x =0y =0width =200height =40>< / rect> < rect id =Rectangle-1x =0y =70width =200height =40>< / rect> < rect id =Rectangle-1x =0y =140width =200height =40>< / rect> < / g取代; < / g取代; < / svg>

但是一旦压缩：

 < symbol id =menuviewBox =0 0 200 180> < g fill =＃D8D8D8fill-rule =evenodd>< path d =M0 0h200v40H0zM0 70h200v40H0zM0 140h200v40H0z/>< / g> < /符号> 
  

使我无法对不同的rect项目执行任何动画，我可以使用它它被转移到精灵中。

有什么方法可以关闭压缩或重新格式化？

解决方案

根据文档，应该可以将svgo从通过

  {
 shape：{
 transform：[] 
} 
} 
  

I'm attempting to use this plugin on every SVG in a given project.

I believe the default compression or reformatting of the svg's themselves is causing issues however.

For example, I have a standard three bar menu icon:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard-1" fill="#D8D8D8"> <rect id="Rectangle-1" x="0" y="0" width="200" height="40"></rect> <rect id="Rectangle-1" x="0" y="70" width="200" height="40"></rect> <rect id="Rectangle-1" x="0" y="140" width="200" height="40"></rect> </g> </g> </svg>

But once it's compressed:

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

Making it impossible for me to do any animation to the different rect items that I could do with it before it was moved into the sprite.

Is there any way to turn off the compression or reformatting?

解决方案

According to the documentation it should be possible to remove svgo from the transformation process via

{
    shape : {
        transform           : []
    }
}

这篇关于使用Gulp创建不压缩的SVG sprite的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！