SVG Masks

News / 📅 June 4, 2026

SVG masks allow making parts of the graphic transparent in a reversible way, without having to use the subtraction boolean operation. Masks are defined using the <mask> element. This element can contain typical SVG shapes or paths. It should also have an id attribute. The mask can be applied to other elements by referencing its id in the mask attribute: mask="url(#id)"

By default, the luminosity of the contents of the <mask> element determine which parts of masked elements remain visible. In other words:

• White → Visible
• Black → Invisible/hole
• Empty → Invisible/hole
• Gray  → Semitransparent

The new app's vector editor was recently updated to support making and applying masks. This can be done both using the command bar and the Combine tab of the Layers panel as shown in the following video.