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
648 stars 43 forks source link

Unexpected behavior because gulp-svg-sprite removes line-breaks...? #46

Closed mpiasta-ca closed 8 years ago

mpiasta-ca commented 8 years ago

I'm wondering is there a config option to prevent gulp-svg-sprite from removing the line-breaks from the svg source. I have an svg with a really long <path> that runs several lines. But gulp-svg-sprite seems to be doing some sort of minification when it creates the sprite.

It takes an svg that looks like this:

motorcycle

original.svg:

<path style="fill:#58595B;" d="M18.052,3.858c-0.541,0-1.283,0.246-1.283,0.246c-0.13,0.043-0.294-0.019-0.362-0.138l-1.466-2.534
    c-0.069-0.119-0.021-0.173,0.106-0.12l0.366,0.153c0.127,0.053,0.343,0.096,0.481,0.096h0.259c0.138,0,0.25-0.113,0.25-0.25V0.25
    c0-0.137-0.112-0.25-0.25-0.25h-2.177c-0.137,0-0.362,0-0.5,0h-1.864c-0.137,0-0.25,0.113-0.25,0.25v0.259
    c0,0.137,0.113,0.25,0.25,0.25h1.714c0.137,0,0.306,0.097,0.375,0.217l0.214,0.371c0.069,0.119,0.012,0.217-0.125,0.217h-3.204
    c-0.137,0-0.25,0.112-0.25,0.25v1.07c0,0.138-0.113,0.25-0.25,0.25H9.742c-0.137,0-0.313-0.093-0.39-0.207L8.78,2.082
    C8.703,1.968,8.528,1.875,8.39,1.875h-5.7c-0.137,0-0.25,0.112-0.25,0.25v1.017c0,0.138,0.113,0.25,0.25,0.25h1.935
    c0.138,0,0.211,0.106,0.164,0.235L4.747,3.741C4.699,3.87,4.55,3.953,4.416,3.926c0,0-0.337-0.068-0.646-0.068
    C1.688,3.858,0,5.546,0,7.628c0,2.081,1.688,3.771,3.77,3.771c2.081,0,3.769-1.689,3.769-3.771c0-1.472-1.898-3.186-1.898-3.186
    C5.538,4.35,5.493,4.169,5.54,4.04l0.151-0.413C5.738,3.497,5.873,3.392,5.99,3.392s0.292,0.081,0.387,0.18
    c0,0,2.13,2.216,2.13,4.125c0,0.815-0.609,2.027-0.609,2.027c-0.062,0.123,0,0.223,0.138,0.223h4.673
    c0.137,0,0.274-0.11,0.304-0.244l1.331-6.067c0.029-0.134,0.166-0.244,0.304-0.244h0.196c0.137,0,0.306,0.097,0.375,0.216
    l0.459,0.795c0.069,0.119,0.052,0.302-0.038,0.406c0,0-1.358,1.585-1.358,2.819c0,2.081,1.688,3.771,3.769,3.771
    c2.082,0,3.77-1.689,3.77-3.771C21.822,5.546,20.134,3.858,18.052,3.858z"/>

...and because of the minification, causes it to render like this:

motorcycle2

sprite.svg:

<path d="M18.052 3.858c-.54 0-1.283.246-1.283.246a.32.32 0 0 1-.363-.138L14.94 1.432c-.068-.12-.02-.173.107-.12l.366.153c.127.053.343.096.48.096h.26a.25.25 0 0 0 .25-.25V.25a.25.25 0 0 0-.25-.25h-4.541a.25.25 0 0 0-.25.25v.26c0 .136.113.25.25.25h1.714a.48.48 0 0 1 .375.216l.215.37c.07.12.012.218-.125.218h-3.204a.25.25 0 0 0-.25.25v1.07a.25.25 0 0 1-.25.25h-.344a.53.53 0 0 1-.39-.207l-.572-.845a.527.527 0 0 0-.39-.207h-5.7a.25.25 0 0 0-.25.25v1.017c0 .138.113.25.25.25h1.935c.138 0 .21.106.164.235l-.043.114a.302.302 0 0 1-.33.186s-.338-.068-.647-.068a3.77 3.77 0 1 0 3.77 3.77c0-1.472-1.9-3.186-1.9-3.186a.4.4 0 0 1-.1-.402l.15-.413c.048-.13.183-.235.3-.235s.292.08.387.18c0 0 2.13 2.216 2.13 4.125 0 .815-.61 2.027-.61 2.027-.06.123 0 .223.14.223h4.672c.136 0 .273-.11.303-.244l1.33-6.067a.326.326 0 0 1 .305-.244h.196a.48.48 0 0 1 .375.216l.458.795c.07.12.052.302-.038.406 0 0-1.358 1.584-1.358 2.818a3.77 3.77 0 0 0 3.77 3.77 3.77 3.77 0 1 0 0-7.54z" fill="#58595b"/>

I manually pasted the original unminified path back into the right spot in the sprite, with all the original line-breaks, and it fixes the broken image (but of course that won't stay, because it rebuilds each time I run the build task).

Any ideas on what I could do in this case?

mpiasta-ca commented 8 years ago

Hmm, nevermind. Graphic designer sent me a new version of the svg and this somehow magically works (regardless of the line-breaks in the <path>).