How to replace hardcoded svg colors with css custom properties
- Step 1Upload your SVG — Drop the SVG with hardcoded colors. The tool scans all unique colors and displays them in a mapping panel.
- Step 2Assign variable names to each color — For each discovered color, enter a CSS variable name: --color-primary, --color-accent, --color-background. Or use auto-mapping to generate names from your design token naming convention.
- Step 3Download SVG and CSS declarations — Download the modified SVG (with var(--color-primary) replacing hardcoded values) and the CSS file with :root variable declarations. Add both to your project.
Frequently asked questions
How do CSS variables work inside SVG?+
When an SVG is inlined in HTML (not used as img src), it inherits the document's CSS custom properties. Set --color-primary on :root and all var(--color-primary) fills update instantly.
Does this work with SVG used as img src?+
No. CSS variables inside SVGs used as img src or background-image do not inherit from the document. Inline the SVG in HTML for theming to work.
Can I auto-detect colors to map?+
Yes — the tool scans the SVG and lists all unique colors. Click any color to assign a variable name, then generate the modified SVG with all mappings applied.
What tier is required?+
CSS Variable Injection requires a Pro subscription. Single file processing in the browser UI is included; batch processing of multiple SVGs requires the Pro API.
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.