1

I have an SVG that's meant to be a responsive web button:

enter image description here

After some trial and error, I've noticed it doesn't look great at extreme widths: the vertical borders get thinner and thicker as the viewport shrinks and grows, respectively. I thought I could solve this with border-image-slice, but as you can see in that link, it's not as straightforward as I would've hoped, and my gut tells me it can't solve the problem I'm facing.

So, here's my next idea: I'll make two SVGs out of this button. The first will be everything but the black (a doughnut, if you will):

enter image description here

The second will be the inverse of the black (the doughnut hole). These will become the border-image-slice and the background, respectively. The problem is, I don't know how to create the doughnut or the doughnut hole.

I've tried googling, and the official InkScape documentation tells you how to do this (in fact, that's where I came up with these doughnut terms; they're used in the official documentation). The problem is, every solution I find is written as though the image consists of exactly two objects/paths. But as you can see from the layers tab on my first picture, I've got many more than two.

To summarize my question, when I'm working with a complex (i.e., more than two objects/paths) image, how do I clip out a doughnut hole that cuts through all paths/objects/layers, and how do I inverse clip the doughnut?

Improve this question

1 Answer 1

Reset to default
1

You can constrain the visible parts of any object (including groups) to the fill-area of another shape by setting it as a clip-path.

First group everything together (maybe make a clone with Alt + D for the inverse too), put the shape you want to use as clip on top of the group, select both and use 'Object → Clip → Set Clip' (duplicate clip object first, then 'Set Inverse Clip (LPE)' for the inverse). Alternatively, right-click and select 'Set Clip' there.

This operation is non-destructive, meaning it doesn't actually delete anything, just hides areas visually. Also it can easily be reversed at any time by using 'Object → Clip → Release Clip' (or right-click, then 'Release Clip').

Improve this answer
3
  • Thanks for the help.I'm still learning the terminology, but is the grouping step already done in my example? The top of the tree is called Ingame_Primary_Button. Is that an example of everything grouped together, or do you mean something else?
    – Clueless Investor
    Commented Oct 19, 2022 at 1:22
  • "it doesn't actually delete anything, just hides areas visually" I think I figured out these steps through trial and error before your answer. It had one issue though: The strokes of that inner border (the path selected in the first image) were sliced in half. One half ended up in the doughnut, the other half ended up in the hole. How do I make the strokes only in the doughnut?
    – Clueless Investor
    Commented Oct 19, 2022 at 1:26
  • 1
    @CluelessInvestor Yes, those entries in the 'Layers and Objects' list with the folder icon are group objects. As for including more of the stroke, You'll have to make the clip object bigger or smaller. You can try the 'Offset' path-effect.
    – Xrott
    Commented Oct 19, 2022 at 2:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.