How to understanding svg <defs>, <symbol>, and <clippath> elements
- Step 1Find the <defs> block — Open your SVG in a text editor and locate the <defs> element near the top. This contains all reusable definitions. Common children: linearGradient, radialGradient, clipPath, filter, symbol, marker.
- Step 2Trace id references — Pick any id inside <defs>, e.g., id='gradient-1'. Search the document for url(#gradient-1) to find where it's used. If there are no matches, it's unused.
- Step 3Test removal safely — Remove a suspected unused def and reload the SVG in a browser. If nothing changes visually, it was safe to remove. The Unused Defs Purger automates this process.
Frequently asked questions
What is the difference between <defs> and inline element definitions?+
<defs> elements are defined once and can be reused multiple times via <use> or url(#id) references. Inline elements are drawn immediately where they appear and can't be reused.
Can I put any element inside <defs>?+
Technically yes — any SVG element can be in <defs>. But only elements designed for reuse (gradient, pattern, filter, clipPath, marker, symbol) should be there. Shapes in <defs> are invisible unless used via <use>.
What is the difference between <symbol> and <g>?+
<symbol> has its own coordinate system (viewport + viewBox) and is never rendered directly — only via <use>. <g> is a grouping element rendered in the parent coordinate space. Use <symbol> for icon sprite components.
Why do Figma exports have so many unused gradient defs?+
Figma pre-generates gradients for all states and variants of a component. When you export a single frame, unused variant gradients are often included in the export's <defs> block.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.