0

SVG Clipping vs. Masking

I recently came across clipping and masking in SVG. I noticed that the <mask> element includes every feature of the <clipPath> element.

In addition, <clipPath> has many disadvantages:

Because of this I wonder what the <clipPath> element is for:
The <mask> element is much more powerful!

That is my code:

<svg viewBox="0 0 100 100" width="100" height="100">
  <defs>
    <clipPath id="clip">
      <rect x="0" y="0" width="50" height="50"/>
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="50" fill="grey" clip-path="url(#clip)"/>
</svg>

Finally, my questions:

  • Should I use <mask> instead of <clipPath> in my code snippet?
  • Is there any situation when <clipPath> is more suitable than <mask>?
jak.b
  • 273
  • 4
  • 15
  • 2
    Mask is raster, clip-path is vector. Usually a clip-path will be much much faster providing it's suitable at all as an alternative. – Robert Longson May 31 '18 at 20:16
  • @RobertLongson Is a raster element even if you don’t use any image?? – jak.b May 31 '18 at 20:21
  • Yes. From the spec: "Note that SVG ‘path’s, shapes (e.g., ‘circle’) and ‘text’ are all treated as four-channel RGBA images for the purposes of masking operations." – Michael Mullany Jun 01 '18 at 00:07
  • @RobertLongson Thank you! You could use this as answer of my quesion. – jak.b Jun 01 '18 at 20:24

1 Answers1

1

Mask is gradual, while clip-path clearly defines the area in the sense what is there and what not. This means that clip-path gives a clickable area, while mask does not change the click are at all, meaning that also the areas that are masked away can be clicked.

Gobo
  • 11
  • 1
  • 1
    Good point! The unchanged pointer area when applying a `` is an important aspect. You could improve your answer by adding an example illustrating the different behaviors. – herrstrietzel Apr 16 '23 at 15:50