No optimization, just svg-sprite about svg-sprite HOT 12 CLOSED

Hi @Avcajaraville,

you can disable SVG optimization altogether by emptying the default list of transforms:

var config = {
    transform: []
    /* ... */
}

For an example of how to disable certain SVGO plugins (which is most likely what you will want to do to solve your problem) please see here.

Please let me know if this works for you!

Cheers, Joschi

from svg-sprite.

Not really. I disable the svg optimization, and the output its better, but still, some problems happens.

This are some .svg icons I have, they are ok, you can see them properly on the browser, and on image viewer :

And then, when compiled into a sprite (as I said, tried disabling svgo as you explained, and also disabling plugins by hand (all of them) ), getting this:

Note, the tagespiel icon isnt even showed.

Any hint or what can I do to fix this issue ?

Thanks !

from svg-sprite.

Could you please send me the original SVG files and your config object to [email protected]. I'll try to figure out what's the problem.

from svg-sprite.

Already sent you that email !

Thanks again for your help !

from svg-sprite.

Thanks! Will try to work on it later today / tonight! :)

from svg-sprite.

Great, that would be awesome !

I cant wait to use svg all around my site, but till I have the sprites fixed, I cant deploy them.

Thanks so much for helping :)

from svg-sprite.

Ok, it turned out this is a major bug in svg-sprite! I know the reason, now I'm working on a fix. Please give me some more ...

from svg-sprite.

As I said, this was a major bug in svg-sprite which got fixed with release v1.0.11.

However, you've still got a problem with your original SVG files: Several of them are using the same CSS class names (inside a <defs> block), e.g. st0 or st1. They are generated by Illustrator when exporting the SVG files and interfere with each other when they get compiled into the sprite ("CSS bleeding"). svg-sprite doesn't namespace CSS class names at the moment (in contrast to IDs), so in addition to the above fix you will also need to sanitize your SVG files (manually, I guess).

Please let me know if this works for you! I'll close this issue for now, but please feel free to re-open in case of further problems.

Cheers, Joschi

from svg-sprite.

Amazing ! That was the problem...

Anyway, the whole svg collection I have is huge, and some svgs have at least 60 st. classes, which means, sanitize it manually is kind of not an option.

So, how people address this problem ? Alternatives to Illustrator that doesn't make this class naming ? Any plugin, or something I can use to randomize the naming of theses classes and ids ?

BTW; was awesome that you had a look to my problem and found the solution. Really. Thank you so much ! We have been struggling with this for ages :D

from svg-sprite.

No problem, glad it worked for you!

In fact, I'm thinking about implementing class namespacing into svg-sprite (as I did it for IDs), as this seems to be an essential problem under certain circumstances. I just never thought of it. Like with ID namespacing, however, this will has to be an optional feature as it can break e.g. scripting / animating the SVGs. I created a new issue for that (#42).

Cheers, Joschi

from svg-sprite.

Cool man ! Thats amazing !

Really looking forward for that.

from svg-sprite.

@Avcajaraville FYI: CSS class namespacing is now available as of release 1.2.26. :)

from svg-sprite.