Free · Private · No sign-up

SVG Mask & Clip Path Debug Editor

Inspect SVG mask and clipPath definitions, toggle each reference on or off, and debug visual changes live. Copy or download modified SVG while preserving your original source.

1 Original SVG

Never overwritten

Drop an SVG or browseReferences are edited in a separate copy SVG markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 200" width="720" height="400">
  <defs>
    <mask id="fade-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="360" height="200">
      <rect width="360" height="200" fill="white"/>
      <circle cx="180" cy="100" r="54" fill="black"/>
    </mask>
    <clipPath id="badge-clip" clipPathUnits="userSpaceOnUse">
      <rect x="20" y="20" width="320" height="160" rx="28"/>
    </clipPath>
  </defs>
  <g clip-path="url(#badge-clip)">
    <rect width="360" height="200" fill="#b9ef7d"/>
    <path d="M20 150L130 45l75 70 55-50 80 85" fill="none" stroke="#295f3d" stroke-width="26" mask="url(#fade-mask)"/>
  </g>
</svg>

2 Definition switches

Live debug revision

3 Modified debug SVG

Definitions retained

Generated SVG markup

4 Debug preview

Blob image · scripts isolated

Preview of the modified SVG mask and clip path revision

Your file is processed on this device and never uploaded.

How it works

From input to output,
in a few clicks.

Isolate masking and clipping behavior without deleting definitions from your artwork. The editor inventories geometry and content settings, tracks local URL references, and produces a separate debug revision with only the selected mask or clip-path references removed.

Load SVG markupPaste or upload an SVG. The scanner lists every mask and clipPath with its ID, direct child count, units, and geometry values.
Toggle definitionsDisable a definition to remove matching url(#id) references from mask or clip-path attributes and inline styles. The original input remains unchanged.
Compare and exportReview duplicate or missing reference warnings, inspect the safe preview, then copy or download the independently generated debug SVG.

Good to know

Frequently asked questions

Does disabling a mask delete its definition?

No. Definitions remain in the output so you can compare revisions. The tool removes the corresponding local url(#id) reference from relevant presentation attributes and inline styles, leaving a fallback value intact when one exists.

What happens when an ID is duplicated?

Duplicate IDs are reported because SVG URL resolution becomes ambiguous. Disabling any listed definition with that duplicated ID removes all matching local references to the ID; no attempt is made to guess which duplicate a browser should use.

Are missing references detected?

Yes. mask and clip-path attributes and inline styles are scanned for local fragments. A warning identifies references whose target is absent or points to an unexpected element type.

Will styles inside a style element be changed?

No. The debug revision targets presentation attributes and inline style declarations only. Rules embedded in style elements are not rewritten, avoiding fragile CSS transformations and unintended selector changes.