How to svg color replacement vs. css custom properties: which is better?
- Step 1Determine if theming is static or dynamic — Static: colors are set once at build time (rebranding). Dynamic: colors change at runtime (dark mode, user themes). Static → hex replacement. Dynamic → CSS custom properties.
- Step 2Consider how the SVG is used — SVGs used as img src or CSS background-image cannot use CSS variables. If these are your delivery methods, hex replacement is the only option for color changes.
- Step 3Apply consistently across your library — Mixing approaches in the same icon library creates inconsistency. Choose one and document it in your design system style guide.
Frequently asked questions
When should I use hex replacement instead of CSS variables?+
Use hex replacement for: static SVG assets served as files, one-time rebranding, SVGs in email templates, SVGs used as img src or CSS background-image, and any context where CSS variables cannot be applied.
Can I use CSS variables AND still serve SVGs as external files?+
Only if the SVGs are inlined in HTML. SVG files referenced via src or background-image are isolated from the document's CSS cascade — CSS variables won't propagate into them.
What if I need both static and dynamic color changes?+
Use hex replacement for the static brand colors that rarely change, and CSS variables for the theme-specific colors (dark mode, user preferences) that change at runtime.
Does hex replacement affect gradient colors in SVG?+
Yes. Gradient stop colors (stop-color attributes and inline stop-color styles) are also matched and replaced. A gradient using your old brand color will update to the new color in all stop positions.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.