SVG symbol vs defs
Both elements hide content until referenced — but symbol adds viewport and viewBox behavior that defs simply doesn't have.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Shared Behavior and Key Differences
Both `<defs>` and `<symbol>` contain content that isn't rendered directly and exists only to be referenced elsewhere via `<use>` — the key difference is that `<symbol>` supports its own `viewBox` and acts as a scalable, self-contained unit (like a mini nested SVG), while `<defs>` content has no such independent viewport behavior.
- Both hide direct rendering; content exists only for <use> reference
- symbol supports viewBox, enabling independent scaling per instance
- defs content lacks that independent viewport/scaling behavior
Choosing the Right Element
Use `<symbol>` for icon libraries and reusable graphics where each `<use>` instance might need different sizing (the viewBox scales content into whatever width/height the use element specifies) — use `<defs>` for simpler reusable definitions like gradients, filters, or clip-paths that don't need independent per-instance scaling behavior.
- symbol suits icon libraries needing independent per-instance sizing
- defs suits gradients, filters, and clip-paths without scaling needs
- Icon sprite systems almost universally use symbol, not defs
Frequently Asked Questions
Can I put a symbol inside defs?
Yes — some codebases nest symbol definitions within a defs block for organizational clarity, though it's not required; symbol content is already hidden from direct rendering on its own.
Why does my icon look the wrong size when using use with a symbol?
Check the symbol's own viewBox and the width/height set on the use (or its parent svg) — the symbol's viewBox content scales to fit whatever dimensions the use element's context establishes.
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