How to css custom properties vs. hardcoded colors in svg: a practical guide
- Step 1Identify your SVG delivery method — Inline SVG in HTML: CSS variables work. img src or background-image: CSS variables don't work. This single question often decides the choice.
- Step 2Assess your theming requirements — No runtime theming needed: hardcoded colors are simpler and safer. Dark mode or user-selectable themes: CSS variables are the right architecture.
- Step 3Decide per-color, not per-icon — Some colors in an icon may always be fixed (logo trademark colors) while others should be themeable (UI color). Use hardcoded values for fixed colors and CSS variables only for themeable ones.
Frequently asked questions
Can I use CSS variables for some colors and hardcoded values for others?+
Yes. The CSS Variable Injector lets you assign variables to specific colors while leaving others hardcoded. This is the recommended approach for icons with fixed brand colors and themeable UI colors.
What happens if the CSS variable isn't defined?+
CSS custom properties accept a fallback value: fill: var(--color-primary, #003082). If --color-primary isn't defined, the fallback #003082 is used. Always provide sensible fallbacks.
Can I use CSS variables in SVG gradient stop colors?+
Yes. stop-color: var(--gradient-start) works in inline SVGs with the same CSS cascade rules as fill and stroke. Define the variable on :root or a parent element.
Do CSS variables in SVG work with CSS animations?+
Yes. You can animate CSS custom properties with @property and @keyframes (in Chrome/Edge), and JavaScript transitions can update variable values smoothly. This enables animated color theme transitions.
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.