| Element | Location | Directly Visible | Reusable via <use> | Has viewBox | Good Practice? |
|---|---|---|---|---|---|
<g> | Outside <defs> | ✅ Yes | ✅ Yes (if has ID) | ❌ No | ✅ Yes - for elements that should be visible immediately |
<g> | Inside <defs> | ❌ No | ✅ Yes (if has ID) | ❌ No | ✅ Yes - for reusable groups that shouldn't render initially |
<symbol> | Outside <defs> | ❌ No | ✅ Yes (if has ID) | ✅ Yes | ❌ No - technically works but not recommended |
<symbol> | Inside <defs> | ❌ No | ✅ Yes (if has ID) | ✅ Yes | ✅ Yes - ideal location for symbol definitions |
| Element (path, etc.) | Outside <defs> | ✅ Yes | ✅ Yes (if has ID) | ❌ No | ✅ Yes - for elements that should be visible immediately |
| Element (path, etc.) | Inside <defs> | ❌ No | ✅ Yes (if has ID) | ❌ No | ✅ Yes - for reusable elements that shouldn't render initially |
| Gradient/Filter | Outside <defs> | ❌ No (not visual) | ✅ Yes (if has ID) | ❌ No | ⚠️ Works but not recommended |
| Gradient/Filter | Inside <defs> | ❌ No (not visual) | ✅ Yes (if has ID) | ❌ No | ✅ Yes - proper location for definition elements |
#svg