Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Define reusable graphics in an SVG sprite as <symbol>, not bare elements
In an SVG sprite, wrap each reusable graphic in a <symbol> with its own id and viewBox, then render it via <use>. Bare elements can't be referenced and reused cleanly.
Bad example
| 1 | <svg> |
| 2 | <g id="home"> |
| 3 | <path d="..." /> |
| 4 | </g> |
| 5 | </svg> |
Explanation (EN)
A bare <g> in the sprite has no viewBox and isn't meant to be referenced with <use>, so consumers can't scale or reuse it predictably.
Objašnjenje (HR)
Goli <g> u spriteu nema viewBox i nije namijenjen referenciranju preko <use>, pa ga korisnici ne mogu predvidljivo skalirati ni ponovno koristiti.
Good example
| 1 | <svg> |
| 2 | <symbol id="home" viewBox="0 0 24 24"> |
| 3 | <path d="..." /> |
| 4 | </symbol> |
| 5 | </svg> |
| 6 |
|
| 7 | <svg><use href="#home" /></svg> |
Explanation (EN)
A <symbol> carries its own id and viewBox, so it can be referenced by <use> and reused at any size without duplicating the paths.
Objašnjenje (HR)
<symbol> nosi vlastiti id i viewBox, pa ga <use> moze referencirati i ponovno koristiti u bilo kojoj velicini bez dupliciranja putanja.