Quick Symptom-to-Root-Cause Diagnostic Matrix
| Visible Symptom | Root Cause | Exact Fix |
|---|---|---|
| Blank space inside <img src="a.svg"> | Missing root xmlns="http://www.w3.org/2000/svg" | Add the standard SVG XML namespace to the root <svg> element. |
| Icon renders completely invisible inline | fill="none" with no stroke, OR stroke="currentColor" inside 0px flex item | Add shrink-0 + explicit width/height (e.g. w-5 h-5) and verify stroke/fill. |
| Outer edges of circles/strokes look flat | Stroke width extends outside 0 0 24 24 viewBox bounds | Expand viewBox (e.g. -1 -1 26 26) or inset geometry by strokeWidth / 2. |
| Second multi-color icon turns blank or wrong color | Duplicate id="paint0_linear" or id="clip0" across inline SVGs | Prefix internal <defs> IDs uniquely per icon or use SVG Nexus scoped exports. |
| Interior counter-hole of 'O' or donut fills solid | Optimizer stripped fill-rule="evenodd" or winding order reversed | Restore fill-rule="evenodd" (fillRule in JSX) on compound paths. |
| CSS Data URI breaks entirely | Unescaped # hex character in data:image/svg+xml string | Replace # with %23 or encode cleanly with SVG to CSS Converter. |
| Icon squishes inside flex button on mobile | Flexbox shrinks <svg> when button text wraps | Add flex-shrink: 0 (Tailwind shrink-0) to every button SVG. |
| SVG looks blurry despite being vector | Embedded raster <image> inside SVG, or CSS transform: scale(1.37) on layer | Inspect DOM in SVG Editor for <image> tags; render at native target size. |
How to Isolate Any Broken SVG in 60 Seconds
Paste the suspect markup straight into the SVG Nexus Online SVG Editor and switch the canvas to the Checkerboard and Dark Slate backdrops. If the icon renders cleanly there, the bug lives in your page's host CSS (usually a global svg { fill: currentColor } override, a missing shrink-0, or a duplicate <defs> ID elsewhere in the DOM, as explained in the gradient & clip-path ID collision guide).