ID cleanup bug

[ted451]

Sometimes when an SVG has ID's inside it (like when using a filter), the shortened ID after cleanup will be borked, i.e. it seems to have some extra characters or something like that. Example (output after cleanup and spriting):

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="40" viewBox="0 0 50 40" y="985" id="pencil">
<filter width="140%" height="140%" id="b�a" x="-20%" y="-20%">
  <feOffset dy="-1" in="SourceAlpha" result="offOut"/>
  <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0" in="offOut" result="matrixOut"/>
  <feBlend in2="matrixOut" in="SourceGraphic"/>
</filter>
<path filter="url(#b�a)" fill="#C7D1DA" d="M35.883 9.118c-1.938-1.939-5.08-1.939-7.02 0l7.02 7.018c1.937-1.938 1.937-5.08 0-7.018zm-17.918 10.899l-4.965 11.983 11.984-4.967 8.977-8.976-7.018-7.019-8.978 8.979zm-.599 8.672l-1.056-1.055 2.854-6.887s1.274.227 1.912.865c.639.639.465 1.846.199 2.111.266-.266 1.474-.439 2.111.199.639.639.865 1.914.865 1.914l-6.885 2.853z"/>
</svg>

Here you can see that filter has an ID 'ba' and the path should be using it -- but the path can't actually 'match it'. When I open this file in Chrome and inspect with developer tools, the ID is shown as "ba " (notice the space). Also, some others are shown as "b~a", "b|a" and such. The ones with 'invisible characters' do not match, and svg effects just disappear.

Hope this makes sense, and let me know if you need more info...

P.S. Also, many thanks for great module, much appreciated!

[jkphl]

Thanks for this detailed report, @ted451! I'm on a conference right now, but will look into this as soon as I find some time! Cheers, Joschi

[paazmaya]

Just had the similar issue, with the exact same resulting id.
For the mean time used a regular expression to simply remove all non ascii characters....

[jkphl]

Thanks @paazmaya. I'll try to work on it today or tomorrow!

[jkphl]

@ted451 @paazmaya Anyone subscribed to this issue: Could you please send me an original SVG file that reproducibly leads to this error (via email to joschi@kuphal.net or inline to this issue)? Thanks!

[ted451]

@jkphl I have sent the files via email. Here are the steps that allowed me to reproduce the bug:

1. create test src dir, put files in it
2. create multiple copies of files, I did copy/paste about 20 times or so.
3. now create a sprite and open resulting svg file (I was using Chrome to view it)
4. some icons will have shadows, but some will not — the ones that don't have a shadow are the ones with broken ID's. You will have to look closely, it's probably only one icon.

[jkphl]

Thanks a lot @ted451, will try to work on it as soon as possible! :)

[jkphl]

Thanks @ted451 & @paazmaya — should work now! New npm release to follow shortly ... :)