search

svg-sprite / gulp-svg-sprite

SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours
MIT License
647 stars 43 forks source link

Malformed icon in packaged .svg #72

Closed midzer closed 7 years ago

midzer commented 7 years ago

Hi all,

i use svg-sprite to combine some .svg into one file. Awesome tool. Everything is working smoothly except one icon being malformed in browser after packaging.

Relevant .svg: https://feathericons.com/node_modules/feather-icons/dist/icons/info.svg

Resulting in a missing dot in the "i" (live at https://feuerwehr-eisolzried.de/ next to "Intro")

Following config is passed to svg-sprite instance:

const config = {
  mode: {
    inline: true,
    symbol: { // symbol mode to build the SVG
      dest: 'icons', // destination foldeer
      sprite: 'sprite.svg', //sprite name
      example: false // do not build sample page
    }
  },
  svg: {
    xmlDeclaration: false, // strip out the XML attribute
    doctypeDeclaration: false // don't include the !DOCTYPE declaration
  }
};

Is there an issue in my config or perhaps an iusse in svg-sprite while compressing?

Thanks for your help in advance and have a nice day midzer

jkphl commented 7 years ago

@midzer I'm pretty sure this is an issue with an overly aggressive SVGO plugin. Please try selectively disabling SVGO plugins (see https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#shape-transformations for explanation) and let me know if that works.

midzer commented 7 years ago

@jkphl yeah, looks like an issue in SVGO optimization. Original .svg elements are

<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12" y2="8"></line>

resulting in

<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4M12 8"></path>

Haven't figured out yet which SVGO plugin fails. I tried:

{ transformsWithOnePath: false },
{ moveGroupAttrsToElems: false },
{ cleanupIDs: false },
{ removeNonInheritableGroupAttrs: false }

Meanwhile i disabled SVGO optimization completely and icon in question is rendered correctly. Might dig into this issue more at the weekend.

Cheers midzer

jkphl commented 7 years ago

@midzer Alright, so it's definitely an SVGO configuration issue. Good luck with finding out!