Errors 1–6: DOM, IDs, and Framework Compilation Traps

  1. 1. Colliding <linearGradient id="paint0_linear"> or <clipPath id="clip0">: If Icon A is hidden inside a collapsed mobile drawer (display: none) and Icon B shares the same gradient ID, Icon B turns completely invisible! Scope IDs per icon—as SVG Nexus's ID-scoping pipeline does automatically.
  2. 2. Non-deterministic Math.random() IDs in SSR: Breaks React/Next.js hydration; use static icon-slug prefixes or React.useId().
  3. 3. Unconverted XML attributes in JSX (stroke-width, xmlns:xlink, class): Run raw SVGs through the SVG-to-JSX Converter instead of pasting XML straight into TSX.
  4. 4. Internal <style>.cls-1{fill:#f00}</style> leaking across the page: Two Illustrator SVGs both defining .cls-1 overwrite each other globally! Inline presentation attributes (fill="#f00") eliminate class collisions and strict CSP style-src violations.
  5. 5. Missing flex-shrink: 0 inside flex containers: Long translated button text crushes a 20px icon down to 7px wide; always add shrink-0.
  6. 6. Stripping viewBox during aggressive optimization: Without viewBox, changing CSS width crops the graphic instead of scaling it.

Errors 7–12: Network, Security, Dark Mode, and Accessibility

  1. 7. Serving .svg with Content-Type: text/plain: Browsers refuse to render <img src="logo.svg"> unless the header is image/svg+xml.
  2. 8. Cross-origin <use href="https://cdn.other.com/sprite.svg#x">: Blocked by browser same-origin rules; serve sprites from the app origin.
  3. 9. Hardcoded fill="#000" or stroke="#111" disappearing in dark mode: Replace with currentColor inside the Online SVG Editor.
  4. 10. Unescaped # inside CSS Data URIs: Truncates the SVG at the first hex color; encode as %23.
  5. 11. Clickable <svg> swallowing pointer events or missing focusable="false": Add pointer-events: none on button child SVGs if analytics delegates read event.target carelessly (or use event.target.closest('button')).
  6. 12. Unlabeled icon-only buttons failing screen readers: Always pair <button aria-label="..."> with <svg aria-hidden="true">.