Support for clipPath

[jvolker]

At the moment clipPath is not used. Would be great to get support for it.

The following is an example using a circle a clipPath/mask.

Original file in Affinity Designer:

In saxi:

Source of SVG

``` ```

I've also tried several methods and other software (Illustrator, Inkscape) to convert this clipPath/mask into lines. Without luck. I'm happy about any suggestions.

Thanks.

[nornagon]

This is a nontrivial amount of computational geometry, unfortunately. The work would have to happen in flatten-svg.

[msurguy]

@jvolker I think it's worth pointing out that ClipPath and masks are virtual features of SVG, which do not translate into CNC operations in a meaningful way because CNC machines work by moving along vector paths. ClipPath is only virtually hiding the paths / vertices and not really changing the SVG paths, so the machine cannot distinguish between clipPath and no clipPath.

In order to get the output desired, you'd need to actually modify the paths (trim, crop). I was working on a tool that can do that for you but never finished it.

You can check it out here: https://msurguy.github.io/svg-cropper-tool/

• You'd need to have your SVG document size explicitly defined (width / height)
• You need to have no matrix transforms in the document (I use https://jakearchibald.github.io/svgomg/ to simplify / convert paths, sometimes need to open Illustrator for final tuning and export)

[jvolker]

Thanks for your fast replies.

@nornagon feel free to transfer this issue to the flatten-svg repository.

@msurguy Thanks for explaining this in more detail. I am aware of the problem but am surprised there aren't more tools implementing this yet.

Thanks for mentioning your tool. When you are saying you've never finished it, what's still missing?

---

I did a little more research on this topic and found the following code fragments/projects that might be useful:

https://github.com/ubilabs/axidraw/blob/master/src/lib/crop-lines-by-bbox.js https://github.com/ubilabs/axidraw/blob/master/src/lib/crop-lines-by-circle.js

And these two: https://github.com/w8r/martinez/ (mentioned in https://github.com/svg/svgo/issues/680) https://github.com/velipso/polybooljs (used in https://daef.github.io/poly-bool-comparison/ -> https://github.com/w8r/martinez/issues/123)

[jvolker]

More:

https://github.com/mfogel/polygon-clipping https://github.com/johnrees/clipper-fpoint https://github.com/hapticdata/toxiclibsjs/blob/master/lib/toxi/geom/SutherlandHodgemanClipper.js

[msurguy]

@jvolker thank you, I'm fully aware of those algos + quite a few more since I had to implement clipping into my tool to be able to crop shapes. Did you try the tool?

What's not done in my tool (but could be done if somebody can contribute):

• Smarter evaluation if each path even needs to be cropped (currently there's no check, and ClipperJS sometimes deforms the path a tiny bit)
• The SVG doc needs to be first optimized (all shapes converted to paths, remove clipPaths, unsupported features, etc). I have been able to run SVGO in the browser, and that tool can do all of that, just needs to be integrated into this product. Here's my browser based SVGO: https://codesandbox.io/s/svgo-browser-03erd?file=/index.html
• Ability to load arbitrary SVG path to be used as a cutout border
• Restoring path coloring / width / fills for the paths that were originally colored.

If you tried the tool - let me know what you think!

[msurguy]

PS, @nornagon I'm using Flatten-SVG in the cropper tool :) thank you so much for it!

[jvolker]

I've given some feedback in the other thread. Your tool looks really promising. Thanks for that.

Maybe this is helpful to some people in the meantime:

I've realized manually removing vectors was far easier and closer to what I wanted using Illustrator compared Affinity. The "Lasso tool", "Erasor tool" and of course "Direct Selection Tool" of Illustrator can be helpful.

Also Affinity doesn't cut the paths:

Illustrator cuts the paths (closer to what I wanted to achieve):

[nornagon]

I have no plans to work on this currently, but I'd be happy to review a PR from anyone that wants to take a crack at it!

[jvolker]

@msurguy for your tool, are you using any other algorithms on top of what's shipped with https://github.com/junmer/clipper-lib? Thanks.

[msurguy]

@jvolker I think we can move that conversation to this issue: https://github.com/msurguy/svg-cropper-tool/issues/5