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

removeOffCanvasPaths removes wrong paths #1646

Open
cyberalien opened this issue Feb 4, 2022 · 2 comments · May be fixed by #2086
Open

removeOffCanvasPaths removes wrong paths #1646

cyberalien opened this issue Feb 4, 2022 · 2 comments · May be fixed by #2086
Labels

Comments

@cyberalien
Copy link
Contributor

Describe the bug
Plugin removeOffCanvasPaths removes paths that are on canvas

To Reproduce
Steps to reproduce the behavior:

const { optimize } = require('svgo');
console.log(
	optimize(
		'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m12 12 7 7m-7-7L5 5m7 7-7 7m7-7 7-7"/></svg>',
		{ plugins: ['removeOffCanvasPaths'] }
	)
);

Result:

{
  data: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"/>',
  info: { width: '24', height: '24' }
}

Expected behavior
Expected path to not be removed. Path is within canvas.

Desktop (please complete the following information):

  • SVGO Version: 2.8.0
  • NodeJs Version: 16.3.2
  • OS: macOS 12.2
@cyberalien cyberalien added the bug label Feb 4, 2022
@just-boris
Copy link

Another, more simple path to reproduce the same issue:

const Svgo = require('svgo');

const { data } = Svgo.optimize(
  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <path d="m10 5-5 5" stroke="#000"></path>
</svg>`,
  {
    plugins: [`removeOffCanvasPaths`],
  }
);
console.log(data);

As far as I could investigate, it fails this intersection check:

if (intersects(viewBoxPathData, pathData) === false) {

@IchordeDionysos
Copy link

Here are a couple more examples that fail this, they are all quite similar though hope it helps when fixing this issue ☺️:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff321d" stroke-linejoin="round" stroke-width="2" d="m244.2 436.54 22.4 43.69"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff321d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m401.11 236.9 30.63 11.62"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff321d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m299.2 236.9 30.63 11.62"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="#00c3df" d="m500.57 263.23-167.02-81.01"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff321d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"d="m497.36 261.67-163.81-79.45"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="#00c3df" d="m554.32 248.78-220.77-103.6"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="#00c3df" d="m504.57 354.05-11.75 16.98"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff321d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="m502.54 356.99-9.73 14.04"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="#00c3df" d="m446.15 354.05-11.75 16.98"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff321d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="m444.12 356.99-9.72 14.04"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="#00c3df" d="m389.74 354.05-11.75 16.98"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff321d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="m387.71 356.99-9.72 14.04"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff998e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.83" d="m226.18 224.52 18.8-11.73"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff998e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.83" d="m177.4 280.93 91.89-60.32"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff998e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.83" d="m388.77 158.91-25.78 22.62"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff998e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.83" d="m387.86 369.04-32.19-.54"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff998e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.83" d="m387.86 208.04-40.93-.55"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="none" stroke="#ff998e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.83" d="m387.86 445.73-32.19-.53"/></svg>

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