-
Notifications
You must be signed in to change notification settings - Fork 15
SVG Guidelines & Best Practices
1. Always use viewBox for sizing, don’t add height/width to the SVG element.
The viewBox attribute ensures the SVG scales responsively with its container. Setting explicit height and width limits flexibility and may cause layout issues, especially in responsive designs. Instead, control sizing via CSS.
Example:
<svg viewBox="0 0 24 24" class="w-6 h-6">...</svg>
2. fill="none" should not be present on the SVG element.
Setting fill="none" on the <svg> element disables all fills within the SVG by default unless overridden at a lower level. This often results in icons appearing invisible. Control fill at the path level instead, where needed.
3. Avoid linearGradient and other filters as they don’t work in Safari.
SVG filters such as feGaussianBlur, linearGradient, or drop-shadow are either poorly supported or behave inconsistently across browsers—especially Safari.
See [this StackOverflow post](https://stackoverflow.com/questions/48836885/large-blurs-in-svg-filters-not-working-in-safari) for more details.
If you must use effects, test rigorously across platforms or consider raster alternatives.
4. Remove comments, they just bloat the SVG.
Comments might seem harmless, but they increase SVG file size and can inadvertently leak unnecessary design metadata or noise when embedded in production code. Strip them out using an optimizer or manually.
5. Make sure xmlns is added and defined correctly on the SVG element.
This ensures the SVG is interpreted correctly by browsers and works as expected when embedded inline or referenced via <img>. The standard namespace is:
Example:
<svg xmlns="http://www.w3.org/2000/svg" ...>
6. Run SVGs through an optimizing tool like [SVGOMG](https://jakearchibald.github.io/svgomg/).
Optimization tools remove unnecessary metadata, whitespace, and redundant attributes while preserving visual fidelity. This drastically reduces file size and improves performance. SVGOMG is a user-friendly GUI for SVGO.
7. Use currentColor for fill instead of a hardcoded hex value for reusable icons.
Using currentColor makes SVGs inherit the text color from CSS, allowing for easy theme overrides (light/dark mode, hover states, etc.). This improves maintainability and consistency across the UI.
Example:
<path fill="currentColor" d="..." />
✅ Exception: Logos can have hardcoded colors to preserve brand identity.
8. If the SVG is too complex (or larger than 5kb), use PNG instead.
Heavy SVGs (e.g., those with intricate paths or thousands of nodes) can slow down rendering and increase CPU/GPU usage. If performance or size becomes an issue, convert the SVG to a PNG and optimize it using tools like:
PNGs are more predictable across all browsers and render faster in many cases.