Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

removal of spaces introduced on version 1.3.0 creates corrupted SVG? #1138

Closed
barakd opened this issue Aug 6, 2019 · 3 comments
Closed

removal of spaces introduced on version 1.3.0 creates corrupted SVG? #1138

barakd opened this issue Aug 6, 2019 · 3 comments

Comments

@barakd
Copy link

barakd commented Aug 6, 2019

Hi, since the new change in 1.3.0
SVGO now removes unnecessary spaces after arcto path command flags.

I am seeing a pattern where striping the spaces makes SVGO output corrupted.
I am using SVGO to optimize for react-native svgs along with svgr

You can play and see it in action with SVGR playground with SVGO enbaled

E.g I have the following source file

<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17"> <g fill="none" fill-rule="evenodd"> <path d="M-2-6h24v24H-2z"/> <path fill="#FFF" d="M.45 5.34L15.945.175a.695.695 0 0 1 .88.88L11.66 16.55a.695.695 0 0 1-1.287.082L7.122 9.878.368 6.627A.695.695 0 0 1 .45 5.34z"/> </g> </svg>

running it with version 1.2.0
will produce
<Svg width={17} height={17} {...props}><G fill="none" fillRule="evenodd"><Path d="M-2-6h24v24H-2z" /><Path fill="#FFF" d="M.45 5.34L15.945.175a.695.695 0 0 1 .88.88L11.66 16.55a.695.695 0 0 1-1.287.082L7.122 9.878.368 6.627A.695.695 0 0 1 .45 5.34z" /></G></Svg

while on version 1.3.0
<Svg width={17} height={17} {...props}><G fill="none" fillRule="evenodd"><Path d="M-2-6h24v24H-2z" /><Path fill="#FFF" d="M.45 5.34L15.945.175a.695.695 0 01.88.88L11.66 16.55a.695.695 0 01-1.287.082L7.122 9.878.368 6.627A.695.695 0 01.45 5.34z" /></G></Svg>
checking the diffs it indeed removed spaces
(left is 1.20, right 1.3.0)

image

But the issue is that react-native-svg isn't able to parse the outputted svg, on android it will crash, and on IOS it will show the following warning

image

I am not sure if the issue is with svgo or actually a problem of react-native-svg, but would love to get your feedback on which direction the issue originates from.

@grig0ry
Copy link

grig0ry commented Aug 7, 2019

#1137

@wigglepixel
Copy link

wigglepixel commented Aug 31, 2019

Having the exact same issue here. Version 1.3.0 is removing some nececary spaces which is breaking the svg causing problems with animating the svg:

Before (version 1.2.x):
"M984.04 515.32A7543.73 7543.73 0 0 0 949 481l36.67-35.25v-8.88L885 507c4.94 10.53 19.88 34.65 52.42 36.04 21.32.35 39.83-9.24 48-20.98l-1.38-6.74z"

After (version 1.3.0):
"M984.04 515.32A7543.73 7543.73 0 00949 481l36.67-35.25v-8.88L885 507c4.94 10.53 19.88 34.65 52.42 36.04 21.32.35 39.83-9.24 48-20.98l-1.38-6.74z"

Following the other issue as mentioned above adding the 'space-settings' set to false fixes this issue, but this setting to leave out important spaces is way to critical to be set to true per default. It breaks a lot of production svgs. And personally I really wonder what does work without these important spaces. Please set it to true per default. This setting breaks svgs.

Now ALL production projects need extra settings in the config just to avoid this issue.

For me this is a reason not to upgrade to 1.3.0 for a while at least.

- convertPathData:
    noSpaceAfterFlags: false <-- but should be the default
    mergePaths:
        noSpaceAfterFlags: false <-- but should be the default

@f-liva
Copy link

f-liva commented Nov 27, 2020

Why don't SVGO developers deactivate basic noSpaceAfterFlags and finally release an update that fixes this tedious problem that plagues everyone?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants