delete objects outside visible area

[JoKalliauer]

Is there an option to remove not visible objects, which are outside the viewbox, or outside width & height ?

[JoshyPHP]

@GreLI Would it be possible to use intersects() from _path.js using a simple rectangular path to represent the viewbox, to determine whether a given path intersects with the viewbox and therefore is visible?

In other words: create a reference path for the viewbox, iterate through the SVG's items and if the item intersects we know it's visible but if it doesn't intersect then we can remove it.

[TrySound]

Solved by this I guess https://github.com/svg/svgo/blob/master/plugins/removeOffCanvasPaths.js

[danieltroger]

Hi @TrySound, I'm using svgo 3.0.5 but on this SVG

A LOT of off-screen objects are still preserved (682.619 KiB - 0% = 682.619 KiB), any idea why that's the case and if this is in the scope of SVGO to remove?

You can see the not-removed objects by opening the file in inkscape, right clicking it and selecting "release clip"

Edit: it doesn't work either when adding a viewBox to the SVG with its dimensions and putting this into svgo.config.js:

module.export = {
  plugins: [
    "removeOffCanvasPaths"
  ]
}

and running svgo --config svgo.config.js svg.svg -o svg.min.svg

[KTibow]

1. Open in Inkscape a. disable clipping b. remove the objects used for clipping c. select all, shift-click on the icon (it causes problems for some reason), and ungroup d. save new version
2. Minify with SVGO (use multipass, use remove off-canvas paths)
3. Re-enable your clipping

[KTibow]

Update: I spent the last couple hours trying to crush this SVG down for fun (got it around half the size of stock SVGO), I used Inkscape and some custom SVGO plugins, it could probably be reduced further and the background/arrow have yet to be added back but enjoy

[danieltroger]

Wow, huge thanks for the tiny SVG @KTibow and the help!

However, I'm having trouble getting SVGO to really remove off-canvas stuff even following your instructions.

For the following SVG

I'd expect to get the size down drastically by changing the viewport properties to only be the text in the top left corner. However, even after

1. removing clip
2. removing the clip rectangle, the text and arrows
3. ungrouping so often that things start to fall apart

The size decrease only is 3%. Is that because the majority of the size is made up of the images and the off canvas path remover literally only removes paths?

Here's my SVGO output and config file:

daniel@mmmmmmmmmm shopify % svgo --config svgo.config.js open-theme-editor\ copy.svg -o small.svg

open-theme-editor copy.svg:
Done in 1250 ms!
6803.646 KiB - 3% = 6599.204 KiB
daniel@mmmmmmmmmm shopify % svgo --config svgo.config.js open-theme-editor\ copy.svg -o small.svg

open-theme-editor copy.svg:
Done in 1024 ms!
6861.576 KiB - 3.5% = 6620.761 KiB
daniel@mmmmmmmmmm shopify % cat svgo.config.js 
module.export = {
  multipass: true,
  plugins: [
    "removeOffCanvasPaths"
  ]
}
daniel@mmmmmmmmmm shopify % 

[KTibow]

I'd check the SVG and see if there's still more groups being used. Groups break a lot of SVGO.