How to Use SVG <defs> Element  Reusable Definitions Guide
SVG <defs> holds gradients, patterns, filters, symbols, and clip paths  define once, use anywhere in the SVG.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
What SVG <defs> Can Contain
The `<defs>` element is a non-rendering container for reusable SVG elements. Anything placed in `<defs>` is defined but not rendered until referenced by `fill='url(#id)'`, `filter='url(#id)'`, or `<use href='#id'>`.
- <linearGradient> and <radialGradient>  referenced as fill
- <pattern>  referenced as fill for repeating backgrounds
- <symbol>  reusable icon templates referenced by <use>
- <filter>  SVG filter pipelines applied via filter attribute
- <clipPath>  clipping regions applied via clip-path attribute
Best Practices for SVG <defs>
Keep all reusable definitions in a single `<defs>` block at the top of the SVG. Use descriptive IDs. For icon sprite files, define all icons as `<symbol>` elements inside `<defs>` and reference them with `<use>`.
- Place <defs> as the first child of the <svg> element
- Use semantic IDs: id='gradient-primary' not id='g1'
- Group related defs inside named <g> elements for readability
Frequently Asked Questions
Do elements in SVG <defs> affect the document render?
No  elements in <defs> are not rendered directly. They only appear when referenced by other SVG elements in the document.
Can I reference <defs> across multiple SVG files?
You can reference external SVG defs with <use href='sprite.svg#icon-id'> in modern browsers, but inline <defs> in the same document is more reliable across environments.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG